コンポーネント間のpropsの受け渡し - React入門

React入門」の前回はPropsついて解説を行いました。

今回はPropsのように状態を管理するStateについて解説を行います。

Stateとはコンポーネント利用時に設定ができる値で、Propsと違い後から変更ができます。

基本的にはコンポーネントの作成時にconstructorメソッド内でthis.stateオブジェクトに値を指定しておくことで、他のメソッドからthis.stateとして取得することが可能です。

Propsの内容をStateに反映させたい場合は、constructorメソッドでは引数としてPropsを受け取ることができるので受け取った引数をそのままstateに代入することでStateの初期値としてPropsの内容を利用することができます。

StateはsetStateメソッドで更新を行うことができ、即座にrenderメソッドで描画されているHTMLに反映されます。
以下のサンプルでは1秒ごとにStateを更新するスクリプトを実行しており、Stateが変更されたタイミングで変更した内容がHTMLに反映されます。

ReactではStateが変更されたタイミングでコンポーネントの再描画を行うので、UI変更に不要なプロパティはStateではなくPropsで管理したほうがよいでしょう。

次回はReactのイベントについて解説を行ないます。