为什么在有componentDidUpdate时使用getDerivedStateFromProps？ [英] Why use getDerivedStateFromProps when you have componentDidUpdate?

问题描述

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

As componentWillReceiveProps gets removed, we need some means of updating the state based on props change — the community decided to introduce a new — static — method to handle this.

What’s a static method? A static method is a method / function that exists on the class not its instance. The easiest difference to think about is that static method does not have access to this and has the keyword static in front of it.

Ok, but if the function has no access to this how are we to call this.setState? The answer is — we don’t. Instead the function should return the updated state data, or null if no update is needed

The returned value behaves similarly to current setState value — you only need to return the part of state that changes, all other values will be preserved.

You still need to declare the initial state of the component (either in constructor or as a class field).

getDerivedStateFromProps is called both on initial mounting and on re-rendering of the component, so you can use it instead of creating state based on props in constructor.

If you declare both getDerivedStateFromProps and componentWillReceiveProps only getDerivedStateFromProps will be called, and you will see a warning in the console.

Usually, you would use a callback to make sure some code is called when the state was actually updated — in this case, please use componentDidUpdate instead.

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