react教程，类组件生命周期getDerivedStateFromProps

我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续...

react@18中，生命周期getDerivedStateFromProps()是新的周期，主要的公用就是接收外部的props数据，然后生成新的state数据。从功用上来看的话，和UNSAFE_componentWillReceiveProps()是差不多的，但是目前为止，苏南大叔并没有在官方看到两者做对比的言论。

大家好，这里是苏南大叔的程序如此灵动博客，这里记录苏南大叔和计算机代码的故事。本文将要对react的新生命周期序列中的getDerivedStateFromProps()进行解说。该getDerivedStateFromProps()生命周期在react的挂载和更新都会被优先执行。测试环境：create-react-app@5.0.1，react@18.2.0，react-dom@18.2.0，node@16.14.2。

基本认识

无论外部父组件是否传递props，这个getDerivedStateFromProps()都会被执行。Derived，英文翻译为“衍生的”。顾名思义，就是对props进行加工，然后生成新的state数据。那么，以前在componentWillReceiveProps()所做的事情类似。

static getDerivedStateFromProps(nextProps, prevState) {
  console.log(nextProps, prevState);  // 新的`props`，前一个`state`
  return { "拟合": Date.now() }
}

传递进来的是两个值，

• 新的props：nextProps。
• 旧的state：prevState。挂载操作的话，就是初始化的状态值。更新的话，就是挂载DidMount之后的状态值。

冲突周期

和componentWillReceiveProps()/UNSAFE_componentWillReceiveProps()都冲突，不能同时出现在同一个组件里面。

Warning: Unsafe legacy lifecycles will not be called for components using new component APIs.

index uses getDerivedStateFromProps() but also contains the following legacy lifecycles:
  UNSAFE_componentWillReceiveProps

The above lifecycles should be removed. Learn more about this warning here:
https://reactjs.org/link/unsafe-component-lifecycles

执行时机

无论是挂载还是更新，无论是否被传递props，都会被无差别执行。
在挂载角度来看的话，排在render之前。

constructor => getDerivedStateFromProps => render => componentDidMount

在更新角度（无论state/props引起的更新）来看的话，排在shouldComponentUpdate之前。

getDerivedStateFromProps => shouldComponentUpdate => render => getSnapshotBeforeUpdate => componentDidUpdate

static

这个生命周期被特殊的加上了static的字样，所以无法访问到this.字样。所以，在这个生命周期里面，除了主动传进来的nextProps和prevState，无法获得其他资源支持。

在这个getDerivedStateFromProps()生命周期内，视图访问当前this.state.值的行为，是会引发错误的。

Uncaught TypeError: Cannot read properties of undefined (reading 'state')

return返回值

这个生命周期，强制有返回值。不写return会引发错误，如下所示：

Warning: index.getDerivedStateFromProps(): A valid state object (or null) must be returned. You have returned undefined.

如果确实没有数据可返回，可以写：

return null

否则就返回新的状态值，函数会自动合并覆盖到原有的state里面。

return {新的key:新的value}

相关链接

• https://newsn.net/say/react-life-cycle-mount.html
• https://newsn.net/say/react-life-cycle-update.html

结束语

更多react经验文章，请点击苏南大叔的经验文章：

• https://newsn.net/tag/react/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。