KB)Reactはコンポーネントを組み合わせて開発を行うことで、保守性の高いアプリケーションを実現できるライブラリです。同時に、優れたUIを提供するライブラリでもあります。本稿ではコンポーネントを使いこなすためには避けて通れない、PropsやState、およびライフサイクルについて解説します。15.4.0PropsとStateReactコンポーネント内では、PropsとStateという2つのオブジェクトが利用されます。Propsは、コンポーネントを生成するときに親から渡されるオブジェクトで、コンポーネントが画面から取り除かれるまで、不変の値を保持します。対してStateはコンポーネント内で保持される、プライベートなオブジェクトで、可変の変数を保持します。以下のサンプルは、180秒間のカウントダウンタイマーです。こちらでPropsとStateの使い分けのイメージを説明します。実行結果Propsとして、ユーザー名とカウントする秒数を設定しています(1)。このように、一度コンポーネントを生成したら(今回の場合、カウントダウンをスタートしてからは)変化しないような値はPropsで扱います。カウントダウン中の秒数は動的に変化し、刻々と画面に変化が反映されます。コンポーネント生成後にも動的に変化する変数はStateとして扱います(2)。本サンプルでは、コンポーネント生成時にintervalを設定して1秒ごとにcountDownメソッドを呼ぶことでstate.remainingを更新し、カウントダウンタイマーを実現しています。State更新時の注意点Stateの更新について補足します。Stateを更新することはNGです(3)。下記のNGコードのように直接更新した場合、Viewに更新が反映されませんので必ずthis.setState()を呼ぶようにしてください。});また、setState()メソッドはアロー演算子を使うことで、第1引数に前の状態のstate、および第2引数にpropsを受け取ることができます。このメソッドは非同期に処理が行われるため、更新がうまく画面に反映されないような場合は、その点を疑ってみるといいかもしれません。prevState.date}));コンポーネントのライフサイクルReactコンポーネントのクラス型で宣言する場合、必ずReact.Componentクラスを継承します。React.Componentクラスは抽象クラスであり、継承したサブクラスはライフサイクルメソッドを利用することができるようになります。前節のサンプルでもconstructorやcomponentDidMountといったメソッドを特に説明なく利用していましたが、これらはReactComponentクラスが規定するライフサイクルメソッドです。下図はメソッドの一覧を表しています。コンポーネントライフサイクルの各フェーズと対応メソッドReactコンポーネントのライフサイクルには、大きく分けて3つのフェーズがあります。コンポーネントが生成されてDOMに要素が挿入される時(Mountingフェーズ)、PropsやStateの値に変更が発生した時(Updatingフェーズ)、コンポーネントがDOMから取り除かれる時(Unmountingフェーズ)です。各フェーズ内で、図の上から順番にメソッドが呼ばれます。前節において、constructor内でpropsを受け取ってpropsとstateを初期化する処理を行っていましたが、これはコンポーネント生成時の最初に呼ばれるライフサイクルメソッドによるものでした(4)。DOM挿入が完了したタイミングでcomponentDidMountが呼ばれてタイマーを設定し(5)、DOMから取り除かれる際の処理としてタイマーをクリアしています(6)。このようにイベントの設定と解除をcomponentDidMountとcomponentWillUnmountで行うことはよくある実装なので、一つの型として覚えておいてもいいかもしれません。React.Componentクラスに必須のメソッド。単一のReact要素を返す役割をもつが、何も描画する必要が無い場合にはnullやfalseを返すこともできる。DOM挿入前の初期化時に呼ばれる。renderメソッドによるDOM挿入直前に呼ばれる。renderメソッドによるDOM挿入直後に呼ばれる。親コンポーネントから新しいpropsを受け取ったときに呼ばれる。propsが更新されたときのみに呼ばれ、stateが更新されただけでは呼ばれることはない。propsかstateが更新されたときに呼ばれ、初回の描画時(Mountingフェーズ)では呼ばれない。renderメソッドによるDOM挿入直前に呼ばれる。renderメソッドによるDOM挿入直後に呼ばれる。React要素がDOMから取り除かれるときに呼ばれる。上の表はReactコンポーネントの各ライフサイクルメソッドを一覧化したものです。全てのメソッドの詳細は割愛させていただきますが、重要なポイントとしていくつか説明します。全メソッドの詳細が知りたい方は公式リファレンスをご参照ください。[2]constructorはコンポーネントとしてメソッドとして必須ではありませんが、propsを扱う場合には必須のメソッドです。いうのも下記コードのように、constructor内でsuper(props)を呼んで初期化する必要があるからです。constructor内でthis.propsにアクセスするとundefinedとなるため、propsはconstructorよりも後の処理で扱います。};}次に[5]から[8]のUpdatingフェーズで呼ばれる各メソッドについてですが、それぞれがこれから保持することになるPropsとState、または直前まで保持されていたPropsとStateを引数としてとります。PropsとStateの前後関係を比較してロジックを組むことができます。[5]componentWillReceivePropsではPropsの値に変化がなかったとしても、親コンポーネントからPropsを受け取った場合には必ず呼ばれるため、Propsの中身を前後で比較して、値に変化がない場合には更新しないといった具合です。Reactコンポーネントでは親のコンポーネントが更新されるとその子のコンポーネントも全て更新処理が走ります。shouldComponentUpdate内で、falseを返すことでその処理をキャンセルできることも覚えておくといいと思います(デフォルトではtrueが返る)。この処理に関してはjQueryのstopPropagation()の逆をイメージすると分かりやすいかもしれません。