react 16.3-16.4 getDerivedStateFromProps等新的生命周期

doc:

  1. bug fix https://reactjs.org/blog/2018/05/23/react-v-16-4.html#bugfix-for-getderivedstatefromprops
  2. 官方文档 https://reactjs.org/docs/react-component.html#static-getderivedstatefromprops
  3. 某中文教程 https://blog.csdn.net/nnxxyy1111/article/details/80832525
  4. react 16.3-16.4生命周期 http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
  5. 一个非常好的解读 https://zhuanlan.zhihu.com/p/37169569
  6. memoization https://segmentfault.com/a/1190000015301672
  7. 一些新生命周期下的事件(官网译):https://www.zcfy.cc/article/update-on-async-rendering

这个生命周期某种程度上用来替代UNSAFE_componentWillReceiveProps。另外是为了异步渲染(?)。

推荐阅读顺序:5&4,2/6,3,1

特性:

  • 基本功能
    • 通过props往state里面塞东西
  • 每次接受新的props,setState会调用
  • 可能需要在state里面塞入之前的状态来进行对比(官方栗子)

在新的生命周期情况下,一些新的pattern:

  • 在更新props的时候执行一些side effect(拿数据什么的):放在componentDidUpdate里面
  • 在更新props的时候执行重新计算一些数据(some data,指的不是state),使用pureComponent和memoization优化 https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#what-about-memoization(译文:https://blog.csdn.net/nnxxyy1111/article/details/80832525#%E4%BB%80%E4%B9%88%E6%98%AFmemoization)
  • 在更新props的时候reset/重置一些数据,暴力的重新渲染组件就好了(通过更改key),官网说性能差不了多少(谁知道呢)

tips:

  • 期待在constructor,componentWillMount(即将废弃),shouldComponentUpdate,render是pure的,在did*中进行异步操作。实践中在will*进行有effect的操作通常会出发二次渲染,所以直接就放在did里面了。
  • getsnapshotBeforeUpdate目前的应用就是在官网的demo中用于处理dom的scrollTop,更多的使用有待探索