当您有 componentDidUpdate 时，为什么要使用 getDerivedStateFromProps？

IT技术 javascript reactjs ecmascript-6
2021-05-14 23:17:14

我对 react 16 的新生命周期感到困惑，getDerivedStateFromProps 用例。以下面的代码为例，根本不需要 getDerivedStateFromProps，因为我可以通过 componentDidUpdate 实现我想要的。

export class ComponentName extends Component {
  //what is this for?
  static getDerivedStateFromProps(nextProps, prevState) {

    if (nextProps.filtered !== prevState.filtered && nextProps.filtered === 'updated') {
      return {
        updated: true //set state updated to true, can't do anything more?
      };
    }

    return null;

  }

  componentDidUpdate(prevProps, prevState) {
    if(prevProps.filtered !== this.state.filtered && this.state.filtered === 'updated'){
      console.log('do something like fetch api call, redirect, etc..')
    }
  }

  render() {
    return (
      <div></div>
    );
  }
}
3个回答

从这篇文章：

随着componentWillReceiveProps被移除，我们需要一些基于 props 更改更新状态的方法——社区决定引入一种新的——静态——方法来处理这个问题。

什么是静态方法？静态方法是存在于类而不是其实例上的方法/函数。最容易想到的区别是静态方法无法访问 this 并且在它前面有关键字 static 。

好的，但是如果函数无法访问 this，我们如何调用 this.setState？答案是——我们没有。相反，该函数应返回更新的状态数据，如果不需要更新，则返回 null

在此处输入图片说明

返回值的行为类似于当前的 setState 值——您只需要返回状态发生变化的部分，所有其他值都将被保留。

您仍然需要声明组件的初始状态（在构造函数中或作为类字段）。

getDerivedStateFromProps 在组件的初始安装和重新渲染时都会被调用，因此您可以使用它而不是在构造函数中基于 props 创建状态。

如果你同时声明getDerivedStateFromProps并且componentWillReceivePropsonlygetDerivedStateFromProps会被调用，你会在控制台看到一个警告。

通常，您会使用回调来确保在实际更新状态时调用某些代码 - 在这种情况下，请componentDidUpdate改用。

有了componentDidUpdate可以执行回调和依赖于状态更新等代码。

getDerivedStateFromProps是一个静态函数，因此无法访问this关键字。此外，您不会在此处放置任何回调，因为这不是基于实例的生命周期方法。此外，从这里触发状态更改可能会导致循环（例如使用 redux 调用）。

它们都用于不同的基本目的。如果有帮助，getDerivedStateFromProps则更换componentWillReceiveProps.

getDerivedStateFromProps基本上可以为您节省一个渲染周期。假设由于某些props更改，您必须更新某些状态并且 UI 以新状态响应。如果没有 getDerivedStateFromProps，则必须等到调用 componentDidUpdate 进行 prop 比较并调用 setState 来更新 UI。之后再次调用componentDidUpdate，注意避免无休止的渲染。使用getDerivedStateFromProps，UI 更新发生得更早。

其它你可能感兴趣的问题
上一篇如何将 Cura 打印空间映射到 Prusa I3 打印空间 下一篇长丝“采样器”包的好来源？