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

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

苏南大叔:react教程,类组件生命周期getDerivedStateFromProps - react类生命周期getDerivedStateFromProps
react教程,类组件生命周期getDerivedStateFromProps(图6-1)

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

基本认识

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

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

苏南大叔:react教程,类组件生命周期getDerivedStateFromProps - getDerivedStateFromProps
react教程,类组件生命周期getDerivedStateFromProps(图6-2)

传递进来的是两个值,

  • 新的propsnextProps
  • 旧的stateprevState。挂载操作的话,就是初始化的状态值。更新的话,就是挂载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

苏南大叔:react教程,类组件生命周期getDerivedStateFromProps - 周期冲突提示
react教程,类组件生命周期getDerivedStateFromProps(图6-3)

执行时机

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

constructor => getDerivedStateFromProps => render => componentDidMount

在更新角度(无论state/props引起的更新)来看的话,排在shouldComponentUpdate之前。

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

苏南大叔:react教程,类组件生命周期getDerivedStateFromProps - 挂载及更新
react教程,类组件生命周期getDerivedStateFromProps(图6-4)

static

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

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

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

苏南大叔:react教程,类组件生命周期getDerivedStateFromProps - this-state-error
react教程,类组件生命周期getDerivedStateFromProps(图6-5)

return返回值

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

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

苏南大叔:react教程,类组件生命周期getDerivedStateFromProps - 必须有返回值
react教程,类组件生命周期getDerivedStateFromProps(图6-6)

如果确实没有数据可返回,可以写:

return null

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

return {新的key:新的value}

相关链接

结束语

更多react经验文章,请点击苏南大叔的经验文章:

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

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   react