Question

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

组件 A 由 B 和 C

组成

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

或者换句话说，在安装了树中的所有组件后发生了反应componentDidMount

或者例如当组件 A 挂载时，会调用 B componentDidMount组件？

Answer 1

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

constructor（）
componentWillMount（）
渲染（）
componentDidMount（）

让我们说你有这个组件：

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

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

<强>更新

从React 16.3开始，componentWillMount启动了弃用流程，以及componentWillUpdate和componentWillReceiveProps。上面的例子在任何16.x版本的反应中都可以正常工作，但它会得到弃用警告。有一些新的方法可以取代已弃用的方法，并有自己的生命周期。 component API docs中有关他们的更多信息。这是新生命周期的cheatsheet diagram

Answer 2

React docs陈述：

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

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

所以我想你的问题的答案是，不，并非所有组件都已完成安装，而是在安装之前立即启动生命周期方法。

Answer 3

父母的componentDidMount会在孩子的孩子之后开枪。

类似的问题：In which order are parent-child components rendered?

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

3 个答案: