javascript - 如何使用生命周期方法getDerivedStateFromProps而不是componentWillReceiveProps

看来componentWillReceiveProps在即将发布的版本中将被完全淘汰，而采用了新的生命周期方法getDerivedStateFromProps:static getDerivedStateFromProps()。

经过检查，看起来您现在无法像this.props中那样直接在nextProps和componentWillReceiveProps之间进行比较。有没有办法解决？

而且，它现在返回一个对象。我是否正确假设返回值本质上是this.setState？

以下是我在网上找到的示例:State derived from props/state。

之前

class ExampleComponent extends React.Component {
  state = {
    derivedData: computeDerivedState(this.props)
  };

  componentWillReceiveProps(nextProps) {
    if (this.props.someValue !== nextProps.someValue) {
      this.setState({
        derivedData: computeDerivedState(nextProps)
      });
    }
  }
}

之后

class ExampleComponent extends React.Component {
  // Initialize state in constructor,
  // Or with a property initializer.
  state = {};

  static getDerivedStateFromProps(nextProps, prevState) {
    if (prevState.someMirroredValue !== nextProps.someValue) {
      return {
        derivedData: computeDerivedState(nextProps),
        someMirroredValue: nextProps.someValue
      };
    }

    // Return null to indicate no change to state.
    return null;
  }
}

最佳答案

关于componentWillReceiveProps的删除:您应该可以结合使用getDerivedStateFromProps和componentDidUpdate来处理getDerivedStateFromProps，例如，请参阅the React blog post迁移。是的，setState返回的对象更新状态的方式类似于传递给componentDidUpdate的对象。

万一您确实需要 Prop 的旧值，可以随时使用以下内容将其缓存在状态中:

state = {
  cachedSomeProp: null
  // ... rest of initial state
};

static getDerivedStateFromProps(nextProps, prevState) {
  // do things with nextProps.someProp and prevState.cachedSomeProp
  return {
    cachedSomeProp: nextProps.someProp,
    // ... other derived state properties
  };
}

可以将任何不影响状态的内容放入getSnapshotBeforeUpdate中，甚至还有ojit_code用于非常低级的内容。

更新:要了解新的(和旧的)生命周期方法，react-lifecycle-visualizer包可能会有所帮助。