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} />

反应版本：16.4.1

getDerivedStateFromProps不是直接替代componentWillReceiveProps，纯粹是因为它在每次更新后调用，无论是状态更改、道具更改还是父级的重新渲染。

然而无论如何，只需从返回状态getDerivedStateFromProps这不是正确的方法，您需要在返回值之前比较状态和道具。否则，每次更新时状态都会重置为 props 并且循环继续

根据docs https://reactjs.org/docs/react-component.html#static-getderivedstatefromprops

getDerivedStateFromProps在调用渲染之前调用 方法，无论是在初始安装还是后续更新上。它应该 返回一个对象来更新状态，或者null不更新任何内容。

此方法适用于状态取决于的罕见用例 道具随时间变化。例如，它可能很方便 实施一个<Transition>比较其之前和之前的组件 下一个孩子来决定让哪些孩子进入和退出动画。

派生状态会导致冗长的代码并使您的组件 很难思考。确保您熟悉更简单的 备择方案：

如果你需要产生副作用（例如，数据获取 或动画）响应道具的变化，使用componentDidUpdate相反，生命周期。

如果你想仅当 prop 更改时重新计算一些数据， 使用 Amemoization代替帮手。

如果你想当 prop 改变时“重置”某些状态， 考虑 要么制作一个组件fully controlled or fully uncontrolled with a key instead.

P.S.请注意， getDerivedStateFromProps 的参数是props and state并不是nextProps and prevProps

要了解更多详细信息，

为了根据 props 更改进行更改，我们需要将 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;
  }