在17版本中弃用了
componentWillMount，componentwillReceiveProps，componentWillUpdate，增加了getDerivedStateFromProps(nextProps, prevState)和getSnapshotBeforeUpdate
react生命周期(新).png
新的生命周期主要分为三条大线：挂载时，更新时，卸载时，这里主要讲讲更新时。
无论是props值更新（一般是父子组件关系，将state作为参数传给子组件，包括第一次传送），setState状态更新还是forceUpdate强制更新，首先都会触发getDerivedStateFromProps这个周期函数。然后除了forceUpdate外，props以及状态更新还会触发shouldComponentUpdate生命周期函数（当然，与getDerivedStateFromProps不同的是这个第一次绑定数据时或初始化时不会触发）。接着三者共同调用render方法，和getSnapshotBeforeUpdate方法，最后进行组件更新以及更新完成的生命周期函数。
getDerivedStateFromProps(nextProps，curState)
主要作用：根据传入的 props 来更新state
该方法是一个 static 方法意味着这个方法是属于 React.Component 类的方法，所以方法内是无法使用 this 的，这就意味着无法使用this.setState 来更新state，所以这个方法直接通过返回对象的形式来更新state，如果某些 props 的情况不需要更新 state，那么就返回 null 就好。实际上这个方法和 componentDidUpdate搭配使用，就能覆盖 之前componentWillReceiveProps 的所有使用场景了。
getSnapshotBeforeUpdate(preProps, preState)
1、在更新之前获取组件的快照，在组件更新前触发
2、它的返回值会作为第三个参数传递给后面的 componentDidUpdate 参数中，和 componentDidUpdate 一起使用，能覆盖掉 componentWillUpdate 的所有使用场景了
网友评论