javascript - React 中的 componentDidUpdate 与 componentWillReceiveProps 用例

Question

这就是我们使用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，render 将触发两次，而 componentWillReceiveProps 的参数是 nextProps，而 componentDidUpdate 的参数是 prevProp，但说实话，我不知道知道何时使用它们。我经常使用 componentDidUpdate，但使用 prevState，例如更改下拉状态并调用 api

例如。

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

Answer 1

两者的主要区别是:

• 当它们在组件的生命周期中被调用时
• 它如何更新组件状态

他们什么时候打电话？

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

因此，如果您想在组件收到新 props 之前执行某些操作，则可以使用 componentWillReceiveProps，如果您想在组件收到新 props 之后执行某些操作，则可以使用 componentWillReceiveProps em> 它收到了新的 props 或状态，您可以使用 componentDidUpdate。

他们如何更新状态？

这里的主要区别是:

• componentWillReceiveProps 将更新状态 synchronously
• componentDidUpdate 将更新状态 asynchronously .

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