対象読者
- JavaScriptとWeb開発の基礎に理解がある方
- Reactを用いたJavaScriptアプリケーション開発の未経験者
動的な状態管理を行う
前回は、変数をJSXの中で展開する方法や、propsを通じて親から子へと値を渡せることについて解説しました(リスト1)。
function App() { return ( <View> <Welcome name="Sara" /> <Welcome name="Cahal" /> <Welcome name="Edite" /> </View> ); } function Welcome(props) { return <Text>Hello, {props.name}</Text>; }
しかし、このままでは、決まったデータを表示することしかできません。アプリを作っていくのであれば、表示するデータを動的に更新する方法がほしいところです。
Reactには、データを動的に更新するための仕組みとして、 state(ステート、状態の意)という機能が用意されています。クラスコンポーネントと関数コンポーネントのどちらでもstateを扱うことができますが、今回は伝統的な方法であるクラスコンポーネントでの使い方を解説します。
クラスコンポーネントのstateを表示に使う
クラスコンポーネントにおける状態管理には、React.Component
のサブクラスが使用できるstate
プロパティとsetState
メソッドを用います。実用的な具体例は後述するので、本項では、まず基本的なルールについて解説します。リスト2は、state
を初期化して、その内容をWelcomeコンポーネントに渡すサンプルです。
export default class App extends React.Component { constructor(props) { super(props); // (2) this.state = { // (1) name: "Sara", }; } render() { const name = this.state.name; // (3) return ( <View> <Welcome name={name} />{/* (4) */} </View> ); } } function Welcome(props) { return <Text>Hello, {props.name}</Text>; }
stateを初期化するには、ECMAScriptのクラス機構そのままのconstructor
を利用します。(1)のようにstate
プロパティに何らかの値を代入すれば、初期化は完了です。this.state = 1;
のようにプリミティブ型の値を代入しても構いませんが、慣習としてオブジェクトにすることが多いです。ちなみに、constructor
の中では(2)のようにsuper(props);
を呼ぶ必要がありますが、これはおまじないだと思っていただいて構いません。
初期化ができたら、今度はそのデータを表示に使ってみます。state
はクラスのプロパティなので、クラス内のどのメソッドからでも参照することができます。なので、(3)のようにrender
メソッドの中でも参照することができます。
最後に、(3)で作ったname
変数をJSXの中でpropsとして渡すには、(4)のname={name}
のように、{}
で変数を囲みます。実行すると図1のようになります。
![図1:stateの情報が表示できた](http://cz-cdn.shoeisha.jp/static/images/article/11748/11748_001.png)
これで、state
の値を表示に使うことができました。
クラスコンポーネントのstateを更新する
このstate
を何らかのタイミングで更新したい場合には、setState
メソッドを使います(リスト3)。
this.setState({ name: newName });
setState
もクラスのプロパティなので、クラス内のどのメソッドからでも実行することができます。実行すると、render
メソッドが再度実行され、画面が更新されます。
また、setState
はオブジェクトの一部分だけを更新することもできます。リスト4のように、複数のデータを扱うオブジェクトがあったとします。
constructor(props) { super(props); this.state = { name1: "Sara", name2: "Cahal", name3: "Edite", }; } anyEvent() { this.setState({ name1: "Bob" }); // (1) }
name1からname3までのデータがありますが、(1)のsetState
には、name1だけが含まれたオブジェクトを渡します。この場合、Reactはname1の値だけを書き換えて、name2やname3はそのままにします。複数の状態を扱うときには便利なので、覚えておきましょう。
よくある間違い
初心者によくある間違いとして、constructor
のときと同じように、代入してしまうことがあります(リスト5)。
this.state = { name: newName };
確かにクラスのプロパティとしてのstate
はこれで更新できます。しかし、setState
に組み込まれているrender
メソッドを再実行するための仕組みが実行されないため、画面が書き変わりません。正しくsetState
を実行しましょう。