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

Question

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

组分A由B和C组成

当组件B调用它的componentDidMount方法时,所有组件完成安装是否正确？

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

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

Answer 1

根据文档,第一次安装的生命周期方法的顺序如下:

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

假设你有这个组件:

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

当安装A时,它会发射componentDidMount().渲染后会发生这种情况.由于在render()调用A之前B和C不存在,因此完成A的安装需要B和C完成它们各自的生命周期.componentDidMount()安装B和C后,A 会发射.A componentWillMount()在A之前发射render(),因此它也会在B或C安装之前发射

UPDATE

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