React V16.x 生命周期调整

Posted 2021-01-08 cag2050

• 出处：https://blog.hhking.cn/2018/09/18/react-lifecycle-change/

• 旧声明周期：

生命周期 | 属于阶段 | 是否可以setState | 作用
constructor() | 创建阶段 Mounting | | 注意：ES6 子类的构造函数必须执行一次 super()。React 如果构造函数中要使用 this.props，必须先执行 super(props)。
getDerivedStateFromProps | 当创建时、接收新的 props 时、setState 时、forceUpdate 时会执行 || 注意：v16.3 setState 时、forceUpdate 时不会执行这个方法，v16.4 修复了这个问题。

• 逐渐废弃的生命周期方法（3个Will）：

componentWillMount()
componentWillReceiveProps()
componentWillUpdate()

虽然废弃了这三个生命周期方法，但是为了向下兼容，将会做渐进式调整。
V16.3 并未删除这三个生命周期，同时还为它们新增以 UNSAFE_ 前缀为别名的三个函数 UNSAFE_componentWillMount()、UNSAFE_componentWillReceiveProps()、UNSAFE_componentWillUpdate()。
在 16.4 版本给出警告将会弃用 componentWillMount()、componentWillReceiveProps()、componentWillUpdate() 三个函数
然后在 17 版本将会删除 componentWillMount()、componentWillReceiveProps()、componentWillUpdate() 这三个函数，会保留使用 UNSAFE_componentWillMount()、UNSAFE_componentWillReceiveProps()、UNSAFE_componentWillUpdate()

• 一般将生命周期分成三个阶段：
  创建阶段（Mounting）
  更新阶段（Updating）
  卸载阶段（Unmounting）