React 16生命周期整理

新项目用的React16.6, 遂整理一下新版本带来的生命周期改变。

最大的改动是生命周期去掉了三个

componentWillMount
componentWillReceiveProps
componentWillUpdate

并且加了两个静态方法

static getDerivedStateFromProps
getSnapshotBeforeUpdate

刚开始用的时候非常不习惯,不是很能理解为什么16里面React要把这三个生命周期方法干掉。专程google了一下:
React打算推出新的Async Rendering,提出一种可被打断的生命周期,而可以被打断的阶段正是实际dom挂载之前的虚拟dom构建阶段,也就是要被去掉的三个生命周期。生命周期一旦被打断,下次恢复的时候又会再跑一次之前的生命周期,因此componentWillMount, componentWillReceiveProps, componentWillUpdate都不能保证只在挂载/拿到props/状态变化的时候刷新一次了,所以这三个方法被标记为不安全。而在整个16版本里都能无障碍的使用旧的这三个生命周期,但值得注意的是,旧的生命周期(unsafe)不能和新的生命周期同时出现在一个组件,否则会报错“你使用了一个不安全的生命周期”。(引用自https://juejin.im/post/5aca20c96fb9a028d700e1ce

React16之前的生命周期图.png

新的生命周期图.png

我们可以看见除了shouldComponentUpdate,其他在render函数之前的所有函数(componentWillMount,componentWillReceiveProps,componentWillUpdate)都被getDerivedStateFromProps替代。我们在render之前的操作被限制在只能根据props和state的变化生成新的state。

getDerivedStateFromProps:
之前没怎么关注这个文档,根据自己项目实践中发现getDerivedStateFromProps无论是Mounting还是Updating都会被调用(在render之前)。返回一个新对象来更新当前的state或者返回null不改变state。
getSnapshotBeforeUpdate:
这个方法暂时还没有实践过,从查到的文档来看被调用于render之后。它使组件可以在可能更改之前从DOM捕获一些信息(例如滚动位置)。此生命周期返回的任何值都将作为参数传递给componentDidUpdate。

getSnapshotBeforeUpdate(prevProps, prevState) {
    console.log('enter getSnapshotBeforeUpdate.....');
    return 'I will see you in componentDidUpdate';
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    console.log('enter componentDidUpdate snapshot: ', snapshot);
    // you will see  'I will see you in componentDidUpdate' in consolelog
  }

componentDidCatch: 错误handler

componentDidCatch(err, info)

React16提供了错误处理的生命周期方法,在任何子组件渲染期间,生命周期方法中或者构造函数 constructor 发生错误时调用。但通过文档来看componentDidCatch不会捕获下面的错误:

  • 事件处理 (Event handlers) (因为事件处理不发生在 React 渲染时,报错不影响渲染)
  • 异步代码 (Asynchronous code) (e.g. setTimeout or requestAnimationFrame callbacks)
  • 服务端渲染 (SSR)
  • 错误边界本身(而不是子组件)抛出的错误

参考鸣谢
https://www.jianshu.com/p/514fe21b9914
https://juejin.im/post/5aca20c96fb9a028d700e1ce