こんにちは、ともです。

React.jsのドキュメントを読みながら勉強中で、stateのリフトアップの章を勉強中です。

いくつかのコンポーネントが１つの変化する共通のデータを反映する場合に、そのデータを共通祖先のコンポーネントのstateに持たせること（stateのリフトアップ）が利用できます。

この記事ではReact.jsのstateのリフトアップについて理解をまとめておきたいと思います。

stateのリフトアップ前

親コンポーネントにCalculator、兄弟コンポーネントにTemperatureが存在するとします。

兄弟コンポーネント間でお互いのデータの変化を知りたいとします。celsiusが変化したらfahrenheitも同様に算出されるようにしたいです。

しかし、兄弟コンポーネント間で直接変化を伝えることはできません。

兄弟コンポーネント間で変化を伝え合うために、stateのリフトアップを行います。

stateのリフトアップ後

リフトアップ前は兄弟コンポーネント（Temperature）のstateでinputの値を決定していました。

リフトアップにより変化を伝え合いたい値（celsius・fahrenheit）を共通の祖先コンポーネント（Calculator）に持たせました。

これにより兄弟コンポーネントは

• stateのcelsius or fahrenheitから、親から与えられるpropsのcelsius or fahrenheitに変更

このような共通の祖先コンポーネントにstateの値を上げることをstateのリフトアップと呼びます。

イベントで変更があったことを親に通知する

このままではcelsiusに変更があっても、fahrenheitはその変更を知るすべがありません。

兄弟間のコンポーネントでは直接通信することができないため親コンポーネントを経由して変更を通知します。

1. 子コンポーネントの変更を伝えるメソッドをpropsで渡します。
2. 子コンポーネントに変更があった場合は、propsで渡されたメソッドを実行し、親コンポーネントに値を引数で渡します。
3. 再計算で子コンポーネントに渡す温度（celsiusとfahrenheit）が変更するため、再度renderされる

変更があった場合に実行したいメソッドを共通の祖先コンポーネントに実装します。

親から子にpropsでそのメソッドを渡し、変更時に実行するようにイベントハンドラとして登録しておきます。

まとめ

共通の祖先コンポーネントに共通のプロパティを持たせる、stateのリフトアップを行うことによりコンポーネント間で値を同期させることができました。

1. 共通項のstateをリフトアップ
2. 親から子にイベントハンドラを渡す
3. イベントハンドラを介して子に渡すpropsの値を変更

このような手順で兄弟コンポーネント間で上手く通信することができました。

stateのリフトアップとイベントハンドラを共通の祖先コンポーネントに持たせることは勉強になりました。