为什么在有componentDidUpdate时使用getDerivedStateFromProps？

问题描述

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

  export class ComponentName extends组件{
 //这是为了什么？ 
 static getDerivedStateFromProps（nextProps，prevState）{
 
 if（nextProps.filtered！== prevState.filtered&& nextProps.filtered ==='updated'）{
 return {
 updated：true //设置状态更新为true，不能再做什么了？ 
}; 
} 
 
返回null; 
 
} 
 
 componentDidUpdate（prevProps，prevState）{
 if（prevProps.filtered！== this.state.filtered&& this.state.filtered ==='更新'）{
 console.log（'做一些像fetch api call，redirect等...'）
} 
} 
 
 render （）{
 return（
< div>< / div> 
）; 
} 
} 
  

解决方案

来自

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

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

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

如果您同时声明 getDerivedStateFromProps 和 componentWillReceiveProps 将仅调用 getDerivedStateFromProps ，您将在conso中看到警告le。

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

I'm confused about the new lifecycle of react 16, getDerivedStateFromProps use case. Take below code for example, getDerivedStateFromProps is not needed at all since I can achieve what I want with 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>
    );
  }
}

解决方案

From this article:

这篇关于为什么在有componentDidUpdate时使用getDerivedStateFromProps？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！