初探16.3+React升级后的生命周期

480 阅读2分钟

写这篇文章的原因是为了项目中更好的升级React版本,对现有版本迁移到现在16.3版本的新生命周期猜的坑铺展开来,顺便梳理现有React的生命周期。

新增的生命周期

static getDerivedStateFromProps

这个新函数主要是为了确保state和props在调用的获取的时候是同步的,而它存在的意义便是为了替代ComponentWillReciveProps.

然后再采用这个方法的时候引起了我的极度不适,主要是因为他是个static方法(麻蛋!屏蔽了一切通过this的方法),它返回一个对象,而这个对象会合并到组件即将更新的state,就像setState一样。

这个生命周期函数的主要条件是

  • 一个组件已经渲染到页面并且需要更新state的时候
  • 需要从props更新state

getSnapshotBeforeUpdate(prevProps, prevState)

这新的方法都是在虚拟DOM映射到真实DOM前调用。

而这个函数的使用场景是,当你需要获取当前DOM的state的时候。譬如你需要通过下来滚动条往网页顶部添加新数据的时候,通过调用当前方法,你可以计算当前滚动条的位置来维持DOM的更新。

虽然这个函数不是static类型的,但是更推荐用它来返回一个值而不是更新组件,而这个返回的值将作为componentDidUpdate的第三个参数;

而两个异步方法componentWillReceiveProps和componentWillUpdate将在17.0版本被弃用,(UNSAFE_componentWillReceiveProps和UNSAFE_componentWillUpdate将被保留兼容)。潜台词是要升级就请用新周期,不用你就加个UNSAFE恶心自己吧。不过长远来看同步操作对于规避异步状态的维护难的问题起了不小作用。

手写了一份声明周期表