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

Question

看起来 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;
  }
}

Answer 1

关于 componentWillReceiveProps 的移除:您应该能够通过 getDerivedStateFromProps 和 componentDidUpdate 的组合来处理它的使用，参见 the React blog post例如迁移。是的，getDerivedStateFromProps 返回的对象更新状态类似于传递给 setState 的对象。

如果你真的需要一个 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
  };
}

任何不影响状态的东西都可以放在 componentDidUpdate 中，对于非常底层的东西甚至还有一个 getSnapshotBeforeUpdate。

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