reactjs - componentDidUpdate 是否在所有子项更新后运行？

Question

我想知道 React 组件的生命周期方法 componentDidUpdate 是否在所有子组件的 render 方法完成后执行，或者在 render 调用该组件的方法。

由于协调器递归地调用 render 方法来更新 View ，我有预感 componentDidUpdate 在组件的所有子组件重新渲染后执行，但是documentation 中没有足够的信息。 componentDidUpdate 到底什么时候被调用？

Answer 1

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

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

该组件仅在渲染后更新，因此文档暗示它是在所有子级以及父级完成重新渲染后调用的(尽管 a bit unclear )。只有当 DOM 完成更新(包括子元素和所有元素)时，您才能真正对其进行操作。

例如，假设我们有两个组件，A 和 B，并且 B 呈现一个 A 组件。仅当 B 的 render 完成后才会调用 B 的 componentDidUpdate。 B 的 render 将在成功调用 A 的 render 后完成，因为子级由于被渲染而首先渲染。 parent 的一部分。这意味着您的问题的答案是:componentDidUpdate 在所有子级的 render 完成后执行。