根据prop值更改使用哪种组件生命周期方法来设置状态

时间:2019-09-18 10:45:23

标签: reactjs redux

我们可以使用哪种组件方法来根据prop值的变化设置状态?我知道我们可以使用componentWillRecieveProps,但是它将不推荐使用,因此我们可以将其用作componentWillRecieveProps的替代方法。还请发布一个简单的代码示例

4 个答案:

答案 0 :(得分:3)

您现在可以在类组件中使用static getDerivedStateFromProps(props, state)

来自docs的示例:

  static getDerivedStateFromProps(props, state) {
    // Any time the current user changes,
    // Reset any parts of state that are tied to that user.
    // In this simple example, that's just the email.
    if (props.userID !== state.prevPropsUserID) {
      return {
        prevPropsUserID: props.userID,
        email: props.defaultEmail
      };
    }
    return null;
  }

答案 1 :(得分:0)

您可以使用componentDidUpdate方法

componentDidUpdate(prevProps, prevState) {
  if (prevProps.data !== this.props.data) {
    //do something
  }
}

答案 2 :(得分:0)

border

答案 3 :(得分:0)

  

getDerivedStateFromProps

它是在React 16.3中引入的以替换:

  

componentWillReceiveProps

在反应17中将弃用,现在变成

  

UNSAFE_componentWillReceiveProps

    static getDerivedStateFromProps(nextProps, prevState) {
if(nextProps.someValue!==prevState.someValue){
return { someState: nextProps.someValue};
} else return null;
}

此生命周期方法将前一个道具和下一个道具作为输入,并返回派生状态。 此方法是静态的,因此您不能在内部使用this

有关更多信息,请阅读Replacing ‘componentWillReceiveProps’ with ‘getDerivedStateFromProps’