如何使用生命周期方法getDerivedStateFromProps而不是componentWillReceiveProps [英] How to use lifecycle method getDerivedStateFromProps as opposed to componentWillReceiveProps

问题描述

看起来 componentWillReceiveProps 将在即将发布的版本中完全淘汰，转而采用新的生命周期方法 getDerivedStateFromProps 。

It looks like componentWillReceiveProps is going to be completely phased out in coming releases, in favor of a new lifecycle method getDerivedStateFromProps.

https ：//reactjs.org/docs/react-component.html#static-getderivedstatefromprops

经过检查，看起来你现在无法制作一个直接比较 this.props 和 nextProps ，就像你可以在 componentWillReceiveProps 。有什么方法吗？

Upon inspection, it looks like you are now unable to make a direct comparison between this.props and nextProps, like you can in componentWillReceiveProps. Is there any way around this?

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

Also, it now returns an object. Am I correct to assume that the return value is essentially this.setState?

以下是我在网上找到的一个例子
https://github.com/reactjs/rfcs/blob/master/text/0006-static-lifecycle-methods.md#state-derived-from-propsstate

Below is an example I found online https://github.com/reactjs/rfcs/blob/master/text/0006-static-lifecycle-methods.md#state-derived-from-propsstate

之前

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 ，请参阅 React博客文章，例如迁移。是的， getDerivedStateFromProps 返回的对象更新状态，类似于传递给 setState 的对象。

About the removal of componentWillReceiveProps: you should be able to handle its uses with a combination of getDerivedStateFromProps and componentDidUpdate, see the React blog post for example migrations. And yes, the object returned by getDerivedStateFromProps updates the state similarly to an object passed to setState.

如果你真的需要一个道具的旧值，你可以随时将它缓存在你所在的状态：

In case you really need the old value of a prop, you can always cache it in your state with something like this:

state = { cachedSomeProp: null };

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

任何不影响州的东西都可以放在 componentDidUpdate ，甚至还有一个 getSnapshotBeforeUpdate 用于非常低级别的东西。

Anything that doesn't affect the state can be put in componentDidUpdate, and there's even a getSnapshotBeforeUpdate for very low-level stuff.

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

UPDATE: To get a feel for the new (and old) lifecycle methods, the react-lifecycle-visualizer package may be helpful.

这篇关于如何使用生命周期方法getDerivedStateFromProps而不是componentWillReceiveProps的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！