Skip to content

life cycle

xiaohesong edited this page Sep 21, 2018 · 6 revisions

react每种情况下对应的生命周期

  • 第一次加载初始化代码的情况

first load life cycle

  • 父组件re-render导致子组件重新渲染

  • 组件自身state改变(this.setState)

  • 组件通过forceUpdate导致re-rendering

值得注意的是,很多will生命周期将被废弃。

链接
2018.9.21追加

目前版本已经基本废弃了一些方法,很多will的被废弃.

  • componentWillReceiveProps => static getDerivedStateFromProps 被这个静态方法代替,与之前不同的是,componentWillReceiveProps只在props改变的时候才会调用,即父组件改变state. 现在则是每次改变props或者state都会导致触发,在render之前scu之后,scu阻止render也会触发这个静态方法。但是可能并不需要用到这个静态方法

  • getSnapshotBeforeUpdate 这个用的也是不多,只是在更新之前获取dom而已,比如一些聊天界面之类的。

  • componentDidUpdate 更新之后调用这个方法,如果在里面进行setState需要进行条件判断,否则会死循环。另外,如果scufalse,那么这个组件不会被调用。

其他具体细节可以参考官网