Reactでの派生状態の使用

React v16.3には、次のようないくつかの興味深い新機能が導入されています。 getDerivedStateFromProps 方法。 この投稿では、その使用方法について説明します。

React v16.3 では、 getDerivedStateFromProps の代わりに静的ライフサイクル法が導入されました componentWillReceiveProps. コンポーネントをこの新しいメソッドに移動することが重要です。 componentWillReceiveProps Reactの次のバージョンでは間もなく非推奨になります。

と同じように componentWillReceiveProps, getDerivedStateFromProps コンポーネントが新しい小道具を受け取るたびに呼び出されます。

componentWillReceiveProps

古いメソッドがどのようになるかのサンプルを次に示します。

// For example purposes only, this is now deprecated

class List extends React.Component {
  componentWillReceiveProps(nextProps) {
    if (nextProps.selected !== this.props.selected) {
      this.setState({ selected: nextProps.selected });
      this.selectNew();
    }
  }

  // ...
}

ご覧のように、 componentWillReceiveProps コンポーネントの状態を更新するためによく使用されます。 また、への呼び出しなどの副作用が発生する可能性があります this.selectNew().

getDerivedStateFromProps

新しい方法の動作は少し異なります。

class List extends React.Component {
  static getDerivedStateFromProps(props, state) {
    if (props.selected !== state.selected) {
      return {
        selected: props.selected,
      };
    }

    // Return null if the state hasn't changed
    return null;
  }

  // ...
}

電話する代わりに setState 最初の例のように、 getDerivedStateFromProps 更新された状態を含むオブジェクトを返すだけです。 この関数には副作用がないことに注意してください。 これは意図的なものです。

getDerivedStateFromProps 1回の更新で複数回呼び出される可能性があるため、副作用を回避することが重要です。 代わりに、 componentDidUpdate、コンポーネントの更新後に1回だけ実行されます。

最終的なコードは次のとおりです。

class List extends React.Component {
  static getDerivedStateFromProps(props, state) {
    if (props.selected !== state.selected) {
      return {
        selected: props.selected,
      };
    }

    // Return null if the state hasn't changed
    return null;
  }

  componentDidUpdate(prevProps, prevState) {
    if (this.props.selected !== prevProps.selected) {
      this.selectNew();
    }
  }

  // ...
}

まとめ

getDerivedStateFromProps 副作用なしにプロップの変更に基づいて状態を更新することを唯一の目的とする関数を提供することにより、古い方法を改善します。 これにより、コンポーネント全体の推論がはるかに簡単になります。

ただし、派生状態はコンポーネントにいくらかの複雑さを追加し、多くの場合、完全に不要です。 代替案については、投稿おそらく派生状態は必要ありません。