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，渲染将触发两次，并且 componentWillReceiveProps 的参数是 nextProps，而 componentDidUpdate 的参数是 prevProp，但我真的不知道什么时候使用它们.我经常使用componentDidUpdate，但是使用prevState，比如更改下拉状态并调用api

例如。

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

Answer 1

两者的主要区别在于：

• 在组件的生命周期中调用它们时
• 如何更新组件state

什么时候叫他们？

正如名字所暗示的那样——正如你可能知道的，因为你提到“如果我在 componentDidUpdate 中设置状态，渲染将触发两次”——componentDidUpdate 在组件更新之后被调用 （收到新的道具或状态）。这就是为什么这个函数的参数是prevProps 和prevState。

因此，如果您想在组件收到新道具之前做某事，您可以使用componentWillReceiveProps，如果您想在它收到新道具之后做某事道具或状态，你会使用componentDidUpdate。

他们如何更新state？

这里的主要区别是：

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

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