componentDidUpdate 是否在所有子项都更新后运行? [英] Does componentDidUpdate run after all children have been updated?

问题描述

我想知道 React 组件的生命周期方法 componentDidUpdate 是在所有孩子的 render 方法完成后执行，还是在 render<之后执行调用该组件的/code> 方法.

I would like to know if a React component's lifecycle method componentDidUpdate gets executed after all of the children's render methods have finished, or right after the render method for that component is called.

由于协调器递归调用 render 方法来更新视图，我有一种预感，componentDidUpdate 在组件的所有子组件都重新渲染后执行，但是文档 中没有足够的信息.componentDidUpdate 什么时候被调用?

Since the reconciler recursively calls render method to update the view, I have a hunch that componentDidUpdate gets executed after all children of a component has been re-rendered, but there was not enough information in the documentation. When exactly is componentDidUpdate called?

推荐答案

componentDidUpdate 方法在组件的 render 方法执行完毕后被调用.这意味着它将在所有孩子的 render 方法完成后调用.您链接的文档中暗示了这一点:

The componentDidUpdate method is called after the render method of the component is done executing. That means that it will be called after all children's render methods have finished. This is implied in the documentation you linked:

当组件更新时，利用这个机会对 DOM 进行操作.

Use this as an opportunity to operate on the DOM when the component has been updated.

该组件仅在渲染后更新，因此文档暗示它在所有子级以及父级完成重新渲染后调用(尽管 有点不清楚).只有当 DOM 完成更新后，您才能真正对其进行操作，子项等等.

The component is only updated post-render, so the documentation implies that it's called after all children, and consequently the parent, have finished rerendering (albeit a bit unclear). You can only really operate on the DOM when it finishes updating, children and all.

例如，假设我们有两个组件，A 和 B，B 渲染一个 A 组件.B 的 componentDidUpdate 只有在 B 的 render 完成后才会被调用.B 的 render 会在 A 的 render 成功调用后结束父母的一部分.这意味着您的问题的答案是: componentDidUpdate 在所有孩子的 render 完成后执行.

For example, say we have two components, A and B and B renders a A component. componentDidUpdate for B will only be called once B's render finishes. The render of B will finish after A's render is successfully called because children are rendered first due to being part of the parent. That means the answer to your question is: componentDidUpdate is executed after all the children's renders have completed.

这篇关于componentDidUpdate 是否在所有子项都更新后运行?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！