javascript - componentDidUpdate与componentWillReceiveProps在 react 中的用例

这就是我们使用componentWillReceiveProps的方式

componentWillReceiveProps(nextProps) {
  if(nextProps.myProp !== this.props.myProps) {
    // nextProps.myProp has a different value than our current prop
  }
}

与componentDidUpdate非常相似

componentDidUpdate(prevProps) {
  if(prevProps.myProps !== this.props.myProp) {
    // this.props.myProp has a different value
    // ...
  }
}

我可以看到一些差异，例如如果我在componentDidUpdate中执行setState，渲染将触发两次，并且componentWillReceiveProps的参数是nextProps，而componentDidUpdate的参数是prevProp，但是严重的是我不知道何时使用它们。我经常使用componentDidUpdate，但是使用prevState，例如更改下拉状态并调用api

例如。

componentDidUpdate(prevProps, prevState) {
      if(prevState.seleted !== this.state.seleted) {
        this.setState({ selected: something}, ()=> callAPI())
      }
    }

最佳答案

两者之间的主要区别是:

在组件的生命周期中调用时

如何更新组件state

他们什么时候叫？

顾名思义，并且-正如您可能已经知道的那样，因为您提到“如果我在componentDidUpdate中执行setState，则渲染将触发两次” –组件更新(接收到新的 Prop 或状态)后将调用componentDidUpdate。这就是为什么此函数的参数为​​prevProps和prevState的原因。

因此，如果您想在组件接收到新的 Prop 之前做些事情，则可以使用componentWillReceiveProps；如果要在组件接收到新的 Prop 或状态之后做一些事情，则可以使用componentDidUpdate。

他们如何更新state？

这里的主要区别是:

componentWillReceiveProps将更新状态synchronously

componentDidUpdate将更新状态asynchronously。

这很重要，因为在尝试将状态与组件的props的其他部分同步时可能会出现一些问题。

关于javascript - componentDidUpdate与componentWillReceiveProps在 react 中的用例，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49386324/