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

发布时间：2020-12-15 16:21:26 所属栏目：百科来源：网络整理

导读：我有一个具有以下结构的React应用程序：组分A由B和C组成当组件B调用它的componentDidMount方法时,是否所有组件都完成安装？或者换句话说,在树中的所有组件都安装后,React会触发componentDidMount吗？或者例如组件A挂载时是否调用组件B componentDidMount

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

组分A由B和C组成

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

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

或者例如组件A挂载时是否调用组件B componentDidMount？

解决方法

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

>构造函数()
> componentWillMount()
> render()
> componentDidMount()

假设你有这个组件：

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

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

UPDATE

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!