react中getDerivedStateFromProps方法接受的第二个参数state究竟是什么状态？

怎么样才能快乐地敲代码
601 阅读3分钟

引用react官方对getDerivedStateFromProps的说明：官方说明

参数

  • props：组件即将用来渲染的下一个 props。
  • state：组件即将渲染的下一个 state。

返回值

static getDerivedStateFromProps 返回一个对象来更新 state，或返回 null 不更新任何内容。

注意

  • 无论什么原因，此方法都会在 每次 渲染时触发，即挂载和更新阶段都会执行该方法。
  • 此方法无权访问组件实例，也即无法通过this访问组件数据。

坑点

有很多博主和教程都称这两个参数为nextProps，preState（对应官方文档中的props和state），并强调preState指的是组件更新前的状态，我觉得这种表述很不准确，容易引起误解：难道preState是组件更新前的状态？这种理解其实并不正确，甚至是错误的。其他博主对这两个参数的解释如下（以下图片均来自网络教程）：

image.png
image.png
image.png

那么问题来了：什么是发生改变前？如果让我理解，我会理解为当我们使用setState方法去修改状态，在修改之前的状态就是发生改变前，例如原来state = {num:1}，我使用setState({num:2})将num修改为2，那么按照以上博主的解释，我认为getDerivedStateFromProps方法中的state指的是{num:1}时的状态。然而并非如此，实际上state指的是{num:2}的状态，也就是组件即将渲染的下一个 state。根据官方给出的解释可以知道这里的参数state（或其他博主称为的preState）并不是说发生改变前的state或者前一个状态的state，而是指即将渲染的下一个state，所以这里感觉很多博主叫preState并不合理（我感觉叫nextState还挺好的 哈哈哈）。

看下图解释更能明白。要强调的是下面的例子只是为了说明第二个参数state到底是什么状态，不去考虑getDerivedStateFromProps方法使用是否合理等因素。

class Demo extends React.Component {
      state = {
        num: 1
      }
      static getDerivedStateFromProps(props, state) {
        console.log(state)   //点击按钮对num+1之后，这里会输出+1之后的值{num：2}
        return null;
      }
      render() {
        const {num} = this.state;
        return (
          <div>
            <button onClick={() => { this.setState({ num: ++num }) }}>num值+1</button>
            num的值为：{this.state.num}
          </div>
        )
      }
    }

将该组件渲染到页面后，此时页面显示的num值为初始值：1。当点击按钮通过setState方法对num进行+1操作时，由于state发生了变化，组件需要进行更新渲染流程，会执行getDerivedStateFromProps方法，在这里输出state，可以发现里面的num为2，并不是我理解的发生改变前的state，而是即将渲染到页面中的state。如果我们在getDerivedStateFromProps方法中不派生出来num的新状态（也即return null），那么这里输出的state中的num，就是渲染完成后页面中展示的num。所以是不是将preState改称为nextState更好呢？（以上对getDerivedStateFromProps方法的用法是不正确，其目的是证明state到底是什么状态）

avatar
文章
阅读
粉丝