为什么在使用componentDidUpdate时使用getDerivedStateFromProps？

Question

我对于反应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>
    );
  }
}

Answer 1

随着componentWillReceiveProps被删除,我们需要一些基于道具变化更新状态的方法 - 社区决定引入一种新的 - 静态 - 方法来处理这个问题.

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

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

:

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

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

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

如果您声明两者getDerivedStateFromProps并且componentWillReceiveProps仅getDerivedStateFromProps将被调用,您将在控制台中看到警告.

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