react新出来两个钩子函数是什么？和删掉的will系列有什么区别？

附react的新旧生命周期图

旧版本

新版本


在react新版增加了两个钩子：getDerivedStateFromProps和getSnapshotBeforeUpdate

他们分别可以直译为：从props获取衍生的状态 – 更新之前获取快照值

用createReactApp快速创建一个案列解释一下新的两个钩子

图片:

getDerivedStateFromProps
app.js组件上新增一个按钮和一个状态值，点击按钮使得count + 1。
接下来引入getDerivedStateFromProps钩子
getDerivedStateFromProps() {
    console.log('00000000000000')
  }

当这样写这个钩子后，和我们写的普通函数没什么区别，会报错


根据错误信息，可见这个钩子前面得加static关键字，这说明，不是给实例使用的，而是类自身调用的。并且这个钩子内部必须有返回值，返回值是一个state状体对象（返回的对象和组件的state的key：value；保持一致）或者返回null。

当内部返回一个状态对象时：

state = {
    count: 0
  }
  static getDerivedStateFromProps() {
    return {
      count: 100
    }
  }

并且点击按钮，count不再 + 1，返回的状态对象影响到了页面的更新（看新版本钩子图可知，它在render前面），并且以返回的状态对象为主。

getDerivedStateFromProps钩子有2个参数，可以拿到组件传递的props和当前的组件状态。

state = {
    count: 0
  }
  static getDerivedStateFromProps(props，state) {
    return props;
  }
  // index.js组件传递props
  ReactDOM.render(
  <React.StrictMode>
    <App count='200' />
  </React.StrictMode>,
  document.getElementById('root')
);

此时页面count变为了200


总结：官方说道：此方法适用于罕见的用例，但是也得了解了解，在适当环境下也可以采用。

getSnapshotBeforeUpdate

在引入getSnapshotBeforeUpdate之后，再引入componentDidUpdate钩子。否则报错



getSnapshotBeforeUpdate有两个参数，分别是上个props和上个state，暂时先返回null。

state = {
    count: 0
  }
  // static getDerivedStateFromProps(props) {
  //   return props;
  // }
  getSnapshotBeforeUpdate(prevProps, prevState) {
    console.log(prevProps, 'prevProps')
    console.log(prevState, 'prevState')
    return null;
  }
  componentDidUpdate(prevProps,prevState) {
    console.log(prevProps,prevState)
  }

点击按钮触发页面更新


在getSnapshotBeforeUpdate钩子中返回一个存在的值,就可以在componentDidUpdate钩子的第三个参数接到。

getSnapshotBeforeUpdate(prevProps, prevState) {
    console.log(prevProps, 'prevProps')
    console.log(prevState, 'prevState')
    return 'Faker';
  }
componentDidUpdate(prevProps,prevState,c) {
    console.log(prevProps,prevState,c)
}

总结：因为getSnapshotBeforeUpdate在render和componentDidUpdate之间，既在页面完成渲染之前触发，比如获取滚动位置。这个钩子还是比较常用的。