如何使用getDerivedStateFromProps替代componentWillReceiveProps及相关疑问

一、如何在getDerivedStateFromProps中对比新旧props？ #

没错，getDerivedStateFromProps作为静态方法，确实没法直接访问this，自然也就不能像componentWillReceiveProps那样直接拿this.props和传入的nextProps做对比。不过我们可以通过在state中缓存上一次的props来解决这个问题，具体步骤如下：

1. 组件初始化时，将当前props存入state（比如命名为prevProps）；
2. 在getDerivedStateFromProps中，用传入的nextProps和state.prevProps进行对比；
3. 若props有变化，返回的更新对象里要同时把prevProps更新为最新的nextProps，方便下次对比。

给你举个实际的代码示例：

class MyComponent extends React.Component {
  state = {
    prevProps: this.props,
    derivedState: this.calculateDerivedState(this.props)
  };

  static getDerivedStateFromProps(nextProps, prevState) {
    // 对比新旧props的目标字段
    if (nextProps.targetValue !== prevState.prevProps.targetValue) {
      return {
        prevProps: nextProps, // 更新缓存的旧props
        derivedState: this.calculateDerivedState(nextProps)
      };
    }
    // 不需要更新state时返回null
    return null;
  }

  static calculateDerivedState(props) {
    // 这里根据props计算需要的派生state
    return { /* 具体计算结果 */ };
  }

  // ...其他组件逻辑
}

用这种方式就能实现和componentWillReceiveProps几乎一致的新旧props对比逻辑了。

二、getDerivedStateFromProps的返回值是不是等同于this.setState？ #

可以说最终效果相似，但本质和使用场景有明显区别：

• 相似点：返回的对象会和当前state进行浅合并，和this.setState({ ... })的更新效果一致，最终都会触发组件state的更新。
• 不同点：
  1. 调用限制：getDerivedStateFromProps是静态方法，没有this上下文，根本无法调用this.setState，只能通过返回对象来告知React需要更新的state内容；
  2. 返回值类型：只能返回对象或者null，返回null时React不会更新state；而this.setState可以接受对象、函数，还支持第二个回调参数；
  3. 触发时机：getDerivedStateFromProps会在组件挂载、每次更新前（包括props变化、state变化、forceUpdate触发）都自动执行；而this.setState是开发者手动触发state更新的方法。

简单总结：getDerivedStateFromProps的返回值是React更新state的“指令”，它和this.setState最终都能达到更新state的目的，但实现逻辑和适用场景完全不同。

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