reactjs - React 组件层次结构中 componentDidMount 的顺序

Question

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

组件A由B和C组成

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

或者换句话说，ReactcomponentDidMount在树中的所有组件都安装后会触发吗？

或者例如，当组件A安装时调用组件B ？ componentDidMount

Answer 1

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

1. 构造函数（）
2. 组件WillMount()
3. 使成为（）
4. 组件DidMount()

假设你有这个组件：

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

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

更新

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

Answer 2

React 文档状态：

在安装发生之前立即调用 componentWillMount()。它在 render() 之前调用...

每个组件都会触发自己的 componentDidMount。A会自己的，然后是B，然后是C。

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

Answer 3

父母的componentDidMount火灾在孩子之后。

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