componentDidUpdate vs componentWillReceiveProps用例在react中

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,而参数for componentDidUpdate是prevProp,但严重的是我不知道何时使用它们.我经常使用componentDidUpdate,但使用prevState,比如更改下拉状态并调用api

例如.

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

Answer 1

两者的主要区别是:

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

他们什么时候打电话？

正如名字所暗示的那样 - 你可能知道,因为你提到"如果我在componentDidUpdate中执行setState,渲染将触发两次" - 在组件更新后componentDidUpdate调用(接收新的道具或状态).这就是为什么这个函数的参数是和.prevPropsprevState

因此,如果你想在组件收到新道具之前做一些事情,你会使用componentWillReceiveProps,如果你想在收到新道具或州之后做某事,你就会使用componentDidUpdate.

他们如何更新state？

这里的主要区别是:

• componentWillReceiveProps将同步更新状态
• componentDidUpdate将异步更新状态.

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