Replace ‘componentWillReceiveProps’ with ‘getDerivedStateFromProps’

React 16のリリースに伴い、React 16.0がリリースされました。

getDerivedStateFromProps は、componentWillReceiveProps に代わって新しく導入されたライフサイクル メソッドの 1 つで、現在は UNSAFE_componentWillReceiveProps になっています。

getDerivedStateFromProps は、コンポーネントのインスタンス化後と新しいプロパティを受け取ったときに呼び出される静的メソッドです。 静的メソッドなので、このメソッドの内部でthisにアクセスすることはできませんし、他のクラスのメソッドにアクセスすることもできません。 componentWillReceiveProps と異なり、このメソッド内で状態を設定することはできないので、状態を更新する唯一の方法はオブジェクトを返すことです。 もし状態を更新したくない場合は、単に null を返します。

それではコードを見てみましょう。

これは componentWillReceiveProps がどのように動作するかを示しています。

nextProps.someValueとthis.props.someValueを比較し、両方が異なる場合は、何らかの操作を行い、setState、this.classMethod();を呼び出します。

次に、getDerivedStateFromPropsの動作を見てみましょう。

これは、二つのパラメータnextPropsとprevStateを受信します。 前述のように、このメソッドの内部では this にアクセスできないので、nextProps を以前のプロップと比較するために、プロップをステートに保存する必要があります。 上記のコードでは、nextPropsとprevStateが比較され、両方が異なる場合は状態を更新するためのオブジェクトが返され、そうでない場合は状態の更新が必要ないことを示す null が返されます。 もし状態が変化したら、componentDidUpdateが呼ばれ、componentWillReceivePropsや

で行ったような処理を行うことができる。