[解決済み] componentWillReceivePropsではなく、ライフサイクルメソッドgetDerivedStateFromPropsを使用するには？

質問

以下のようになります。 componentWillReceiveProps は、今後のリリースで完全に廃止され、新しいライフサイクルメソッドである getDerivedStateFromProps : 静的な getDerivedStateFromProps() .

を直接比較することができなくなったようです。 this.props と nextProps でできるように componentWillReceiveProps . これを回避する方法はあるのでしょうか？

また、現在はオブジェクトを返しています。この返り値は、基本的に this.setState ?

以下は、ネットで見つけた例です。 props/stateから派生した状態 .

前

class ExampleComponent extends React.Component {
  state = {
    derivedData: computeDerivedState(this.props)
  };

  componentWillReceiveProps(nextProps) {
    if (this.props.someValue !== nextProps.someValue) {
      this.setState({
        derivedData: computeDerivedState(nextProps)
      });
    }
  }
}

その後

class ExampleComponent extends React.Component {
  // Initialize state in constructor,
  // Or with a property initializer.
  state = {};

  static getDerivedStateFromProps(nextProps, prevState) {
    if (prevState.someMirroredValue !== nextProps.someValue) {
      return {
        derivedData: computeDerivedState(nextProps),
        someMirroredValue: nextProps.someValue
      };
    }

    // Return null to indicate no change to state.
    return null;
  }
}

解決方法は？

の削除について componentWillReceiveProps : の組み合わせで対応できるはずです。 getDerivedStateFromProps と componentDidUpdate を参照してください。 Reactブログの記事 はマイグレーションの例です。そして、そうです。 getDerivedStateFromProps に渡されたオブジェクトと同じように状態を更新します。 setState .

どうしてもpropの古い値が必要な場合は、以下のような方法で常にステート内にキャッシュしておくことができます。

state = {
  cachedSomeProp: null
  // ... rest of initial state
};

static getDerivedStateFromProps(nextProps, prevState) {
  // do things with nextProps.someProp and prevState.cachedSomeProp
  return {
    cachedSomeProp: nextProps.someProp,
    // ... other derived state properties
  };
}

状態に影響を与えないものであれば、すべて componentDidUpdate があり、さらに getSnapshotBeforeUpdate は、非常に低レベルのものです。

UPDATE: 新しい（そして古い）ライフサイクルメソッドの感触をつかむために react-lifecycle-visualizer パッケージが役に立つかもしれません。