当前位置 : 主页 > 网页制作 > React >

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

来源:互联网 收集:自由互联 发布时间:2021-06-15
我有一个具有以下结构的React应用程序: 组分A由B和C组成 当组件B调用它的componentDidMount方法时,是否所有组件都完成安装? 或者换句话说,在树中的所有组件都安装后,React会触发componen
我有一个具有以下结构的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

网友评论