javascript - componentWillReceiveProps与getDerivedStateFromProps

对我来说，究竟是什么componentWillReceiveProps和getDerivedStateFromProps是个微妙的问题。因为，我在使用getDerivedStateFromProps时遇到了一个问题:

// Component
state = {
  myState: []
}

// Using this method works fine:

componentWillReceiveProps(nextProps) {
  this.setState({
    myState: nextProps.myPropsState
  })
}

// But using this method will cause the checkboxes to be readonly:

static getDerivedStateFromProps(nextProps,prevProps) {
  const { myPropsState: myState } = nextProps
  return {
    myState
  }
}

// And here's checkbox
<input type="checkbox" id={`someid`}
 onChange={(e) => this.handleMethod(e, comp.myState)}
 checked={myState.indexOf(comp.myState) > -1} />

React版本:16.4.1

最佳答案

getDerivedStateFromProps并不是componentWillReceiveProps的直接替代品，纯粹是因为在每次更新后都会调用getDerivedStateFromProps，无论是状态更改还是 Prop 更改或重新呈现父级。

但是无论如何，从props返回状态都不是正确的方法，您需要在返回值之前比较状态和props。否则，每次更新都会将状态重置为 Prop ，并且周期会继续

按照 docs



P.S. 请注意，getDerivedStateFromProps的参数是state和nextProps，而不是prevProps和ojit_code

要了解更多细节，

为了根据 Prop 更改进行更改，我们需要在状态中存储prevPropsState以便检测更改。一个典型的实现看起来像

static getDerivedStateFromProps(props, state) {
    // Note we need to store prevPropsState to detect changes.
    if (
      props.myPropsState !== state.prevPropsState
    ) {
      return {
        prevPropsState: state.myState,
        myState: props.myPropsState
      };
    }
    return null;
  }