react生命周期新旧对比

react生命周期（旧）

 

componentWillReceiveProps函数在props第一次传进来时不会调用，只有第二次后（包括第二次）传入props时，才会调用

shouldComponentUpdate像一个阀门，需要一个返回值(true or false)来确定本次更新的状态是不是需要重新render

react生命周期分为三大阶段，具体如下所示 

 

react生命周期（新）

 新的生命周期去掉了三个will钩子，分别是：

componentWillMount 、componentWillReceiveProps、componentWillUpdate

新的生命周期新增了两个钩子，分别是：

getDerivedStateFromProps(nextProps, prevState) 静态方法

getDerivedStateFromProps() 用来替代 componentWillReceiveProps()。

它在 render() 方法之前触发，包含两个参数：nextProps 和 prevState，分别表示新的 props 和旧的 state。

如果返回一个对象，那么更新 state；如果返回 null，那么就不更新 state

.getSnapshotBeforeUpdate(prevProps, prevState)

getSnapshotBeforeUpdate() 方法用来替代componentWillUpdate()。

它在最近一次渲染输出（即更新DOM）之前触发，包含两个参数：prevProps 和 prevState，分别表示旧的 props和旧的 state，

返回值会成为 componentDidUpdate() 的第三个参数。