React 16.3.X中如何在getDerivedStateFromProps获取旧props？

你说得没错，getDerivedStateFromProps是静态方法，确实没法在里面使用this，直接访问this.props肯定行不通。不过我们有个很实用的办法：把需要对比的旧props值存在组件的state中，这样就能在这个静态方法里通过prevState拿到它们了。

具体步骤如下：

• 初始化state时存储初始props值
  在组件的构造函数或者state初始化器里，把你需要跟踪的props（比如示例里的id）存到state中，作为旧值的记录。

• 在getDerivedStateFromProps中对比新旧值
  利用方法的第二个参数prevState，取出之前存储的旧props值，和nextProps里的新值做对比。

• 更新state中的旧props记录
  当props发生变化时，记得把state里的旧值更新为新的props值，这样下次对比时就能拿到最新的“旧值”了。

下面是完整的示例代码：

class YourComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      // 初始化时把当前props的id存为prevId
      prevId: props.id,
      // 其他state字段...
    };
  }

  static getDerivedStateFromProps(nextProps, prevState) {
    // 从prevState中取出旧的id，和新的nextProps.id对比
    if (nextProps.id !== prevState.prevId) {
      // 执行你需要的操作，比如请求数据、更新其他state等
      console.log('旧id:', prevState.prevId, '新id:', nextProps.id);
      
      // 返回更新后的state，把prevId设置为新的id
      return {
        prevId: nextProps.id,
        // 其他需要更新的state...
      };
    }

    // 没有变化时返回null
    return null;
  }

  render() {
    // 组件渲染逻辑...
    return <div>当前id: {this.props.id}</div>;
  }
}

额外提醒 #

虽然这个方法能解决你的问题，但要注意getDerivedStateFromProps应该只用于从props派生state的场景，尽量避免过度使用。如果你的需求是在props变化时执行副作用（比如发起网络请求），更推荐在componentDidUpdate里处理，因为那里可以直接访问旧props和当前state，逻辑会更直观：

componentDidUpdate(prevProps) {
  if (this.props.id !== prevProps.id) {
    // 执行副作用操作
  }
}

不过如果你的场景确实需要在渲染前就根据props变化更新state，那前面的方案就完全适用啦。

内容的提问来源于stack exchange，提问作者Emad Emami