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

javascript reactjs lifecycle

2022-08-30 02:22:41

看起来它将在即将发布的版本中完全淘汰，取而代之的是新的生命周期方法：static getDerivedStateFromProps（）。componentWillReceivePropsgetDerivedStateFromProps

经过检查，您现在似乎无法像在中那样直接比较和。。有什么办法可以解决这个问题吗？this.propsnextPropscomponentWillReceiveProps

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

以下是我在网上找到的一个例子：状态派生自 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;
  }
}

答案 1

关于删除：你应该能够通过和的组合来处理它的使用，请参阅 React 博客文章，了解迁移示例。是的，返回的对象更新状态的方式类似于传递给的对象。componentWillReceivePropsgetDerivedStateFromPropscomponentDidUpdategetDerivedStateFromPropssetState

如果您确实需要 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
  };
}

任何不影响状态的东西都可以放进去，甚至还有一个非常低级的东西。componentDidUpdategetSnapshotBeforeUpdate

更新：为了了解新的（和旧的）生命周期方法，react-生命周期可视化工具包可能会有所帮助。

答案 2

正如我们最近在 React 博客上发布的那样，在绝大多数情况下，你根本不需要 getDerivedStateFromProps。

如果您只想计算一些派生数据，请执行下列操作之一：

在里面做render
或者，如果重新计算它很昂贵，请使用像 .memoize-one

以下是最简单的“之后”示例：

import memoize from "memoize-one";

class ExampleComponent extends React.Component {
  getDerivedData = memoize(computeDerivedState);

  render() {
    const derivedData = this.getDerivedData(this.props.someValue);
    // ...
  }
}

查看博客文章的此部分以了解更多信息。