react新旧生命周期

React16.3.0之前生命周期

 

 

16.3开始建议使用新的生命周期

 

新的生命周期增加了static getDerivedStateFromProps()以及getSnapshotBeforeUpdate()，废弃了原有的componentWillMount()、componentWillUpdate()以及componentWillReceiveProps()，被废弃的三个函数都是在render之前。

 

为什么废弃？

总的来说因为React17会使用Fiber算法，该算法会通过开始或停⽌渲染的⽅式优化应⽤性能，很可能因为高优先级任务的出现而打断现有任务，导致它们会被执行多次，这也是ajax请求为什么要放在componentDidMount生命周期中而不是componentWillMount中

为什么废弃componentWillReceiveProps

在老版本的 React 中，如果组件自身的某个 state 跟其 props 密切相关的话，需要在 componentWillReceiveProps 中判断前后两个 props 是否相同，如果不同再将新的 props 更新到相应的 state 上去。这样做一来会破坏 state 数据的单一数据源，导致组件状态变得不可预测，另一方面也会导致组件多做1次不必要的渲染。

static getDerivedStateFromProps()就是为了为了替代该场景的，但是不到万不得已的情况下还是不要用，遇到上述问题，首先需要考虑使用以下的优化方案，

• 如果你需要执行副作用（例如，数据提取或动画）以响应 props 中的更改，请改用 componentDidUpdate。

• 如果只想在 prop 更改时重新计算某些数据，请使用 memoization helper 代替。

• 如果你想在 prop 更改时“重置”某些 state，请考虑使组件完全受控或使用 key 使组件完全不受控 代替。