为什么在有componentDidUpdate时使用getDerivedStateFromProps?

时间:2018-04-27 02:37:41

标签: javascript reactjs ecmascript-6

我对于反应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 个答案:

答案 0 :(得分:11)

来自this article

  

componentWillReceiveProps被删除时,我们需要一些基于道具更改来更新状态的方法 - 社区决定引入一种新的 - 静态 - 方法来处理它。

     

什么是静态方法?静态方法是存在于类而不是其实例上的方法/函数。要考虑的最简单的区别是静态方法无法访问它并且前面有关键字static。

     

好的,但是如果函数无法访问这个,我们怎么调用this.setState?答案是 - 我们没有。相反,该函数应该返回更新的状态数据,如果不需要更新则返回null

     

enter image description here

     

返回值的行为与当前的setState值类似 - 您只需要返回更改的状态部分,所有其他值都将被保留。

     

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

     

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

     

如果您同时声明getDerivedStateFromPropscomponentWillReceiveProps,则只会调用getDerivedStateFromProps,您将在控制台中看到警告。

     

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

答案 1 :(得分:0)

使用componentDidUpdate,您可以执行回调和其他依赖于更新状态的代码。

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

它们都有不同的基本用途。如果有帮助getDerivedStateFromProps正在替换componentWillReceiveProps

答案 2 :(得分:0)

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