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

Question

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

组件A由B和C

组成

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

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

或例如Components B componentDidMount 在组件 A 安装时被调用？

Answer 1

React 文档状态：

componentWillMount() is invoked immediately before mounting occurs. It is called before render()...

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

所以我想你的问题的答案是，不，不是所有的组件都会完成安装，因为它们会触发生命周期方法 'immediately before mounting'。

Answer 2

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

构造函数()
componentWillMount()
渲染（）
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 开始弃用过程。上面的例子在 React 的任何 16.x 版本中都可以正常工作，但它会收到弃用警告。有一些新方法取代了已弃用的方法，它们具有自己的生命周期。有关新生命周期 component API docs. Here is a cheatsheet diagram 的更多信息

Answer 3

Parent 的 componentDidMount 在 children 之后触发。

类似问题：

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

Order of componentDidMount in React components hierarchy

reactjs

react-fiber