组件的顺序DidMount 在 React 组件层次结构中

Question

我有一个具有以下结构的 React 应用程序：

组件A由B和C组成

当组件B调用它componentDidMount方法时，是否所有组件都完成了装载？

或者换句话说，React 会在树中的所有组件都挂载后触发componentDidMount？

或者例如，组件BcomponentDidMount在安装组件A时被调用？

Answer 1

根据文档，首次挂载的生命周期方法顺序如下：

1. 构造函数()
2. componentWillMount()
3. 渲染()
4. componentDidMount()

假设您有此组件：

class A extends Component {
render() {
return (
<div>
<B />
<C />
</div>
)
}
}

当A被挂载时，它会触发componentDidMount()。这将在渲染后发生。由于 B 和 C 在调用 A 的render()之前不存在，因此完成 A 的挂载需要 B 和 C 完成各自的生命周期。A 的componentDidMount()将在 B 和 C 安装后触发。A的componentWillMount()在A的render()之前触发，因此它也在B或C安装之前触发

更新

从 React 16.3 开始，componentWillMount开始弃用过程，以及componentWillUpdate和componentWillReceiveProps。上面的例子在任何 16.x 版本的 react 中都可以正常工作，但它会收到弃用警告。有一些新方法可以取代已弃用的方法，这些方法具有自己的生命周期。有关它们的更多信息，请参阅组件 API 文档。这是新生命周期的备忘单图

Answer 2

父母的componentDidMount在孩子之后被解雇。

类似问题：父子组件按什么顺序呈现？

Answer 3

React 文档指出：

componentWillMount() 在挂载发生之前立即被调用。它在渲染()之前调用...

每个组件将触发自己的组件DidMount。A 将拥有自己的意志，然后是 B，然后是 C。

所以我想你的问题的答案是，不，并非所有组件都会完成安装，因为它们"在安装前立即"触发生命周期方法。