React~基礎編~State

react

React学習記録

前回のReact~基礎編~APP開発では、Reactのより実践的なアプリケーション開発について学習しました。今回は、ReactのStateについて、学びましょう。

State概要

KOUKI
KOUKI

Stateを学んで、面白いアプリケーションを作れるようになりましょう!

より高度なアプリケーションを開発したい場合は、ステートフルなユーザーインターフェースの導入を検討してみてはいかがでしょうか?

「ステートフル」とは、状態を持たないという意味で、例えば次のような実装です。

・ログイン済みユーザーと未ログインユーザーの画面の見え方の違い
・「編集ボタン」をクリックした時、モーダル画面が表示される
・「read more」をクリックした時、WEBページが表示(あるいは非表示)される

つまりは、ユーザーの状態や操作によって、画面の状態が固定化されず、常に流動的に変化するアプリケーションを指しています。

Stateは、画面上で発生するイベントに対して絶えず変化するように設計されています。

そしてReactには、そのイベントをトラックする仕組みが、2つあります。

UI logic – インターフェースの変更をトラック
Business logic – データの変化をトラック

React State

React State は、コンポーネント上のインスタンス属性です。私たちがトラックしたいkeys/valuesの状態でオブジェクトとして存在ます。

Initial State

React Stateは、コンポーネントの作成直後に初期化するべきです。サンプルを載せておきます。

React Constructor Function

コンポーネントがステートレス状態の場合、constructor functionを省略できます。一方、ステートフルな状態(State)でコンポーネントを構築したい場合は、React Constructorが必要になってきます。

3つのポイントがあります。

  1. constructorは、porpsを引数に受け取る
  2. React Componentとして登録する為、super(props)の呼び出しは必須
  3. インスタンスメソッド内では、this.stateにてオブジェクトを参照できる

State Sample

Stateのまとめとして、サンプルを載せておきます。

Changing State

コンポーネントのStateの状態を変えたい場合は、「setState」関数を使用できます。この関数は、Reactの組み込み関数です。

特徴は次の通りです。

・ コンストラクターを除く全てのインスタンスメソッドの中で呼び出せる
・ State変更状態のオブジェクトを受け取れる
・ State オブジェクトにパッチを適用する(未指定Keyは変更されない)
・ 非同期
 - コンポーネントの状態は、最終的にアップデートされる
 - パフォーマンスなどの理由により、State が変更された際にReactが制御する
・ Stateが変わった時、コンポーネントが再度、レンダリングされる

やってみよう

学んだことをアウトプットしましょう。

まずは、Reactプロジェクトを作成します。

srcディレクトリに以下のファイルを作成してください。

続いて、Games.jsに以下のコードを書きます。

このGameコンポーネントをApp.jsに組み入れましょう。

ブラウザから結果を確認します。

コンポーネントの実装はできていますね。

Game.jsを改造して、数値が動的に変更されるようにしてみましょう。

秒間隔で画像の通り、数値が変更されていくようにしました!

React Event

KOUKI
KOUKI

Stateは、ユーザー操作によって発生するブラウザのイベントでも変更できます!

Reactのイベント処理を学びましょう。

先ほどのサンプルでは、javaScriptのよって、動的にStateの状態を変更しました。それ以外にも、ユーザー操作(ドラッグ、フォームの送信、key入力など)に伴うブラウザのイベントでもStateの状態は変更できます。

ブラウザのイベントを担う属性は、JSXが保有しています。

こちらもどうぞ

例えば、クリックイベントを例に挙げます。クリックイベントを表す「onClick(キャメルケースで記載)」では、次の通りにイベントを発生させます。

イベントをバインドさせるには?

KOUKI
KOUKI

イベントを扱う時に注意事項があります!

先ほどの例を少し発展させます。

Web画面に設置したボタンをクリックした時に、画面上の文字が動的に変更されるプログラムを作ってみます。

画面を確認しましょう。

このとき、「Click Me!」を押下するとエラーになります。

何が起こったのでしょうか?

エラーが発生した箇所は、Broken.jsに定義した「this.setState」です。

thisキーワードは、「自分自身」を表す特別な変数です。プログラム内で自由に呼び出すことが可能あり、呼び出した場所や方法によってその中身が変化します。

先ほどの例では、handleClickは、Reactコンポーネント内に設定したbuttonタグに設置しました。

つまり、呼び出し元は、Reactコンポーネントになります。

しかし、Reactコンポーネントは、constructor内の状態を保持しているわけではないので、handleClick関数を経由して、this.setStateを変更させることはできないのです。

変更可能にするには、handleClickをconstructor内にバインドする必要があります。

これで、ボタンをクリックしたら画面の文字列が変わるようになりました。

ただし、現状だと文字列が変化するのは一度きりになります。

総まとめ

Stateの総まとめとして、次のプログラムを作成してみましょう。

初期表示
Random Numberを押下
7になったらプログラム終了
KOUKI
KOUKI

簡単なプログラムですが、今回の学習の要点が入っています。

<仕様>
・初期表示の数値は、1
・ボタンを押下することで、数値が変更される
・数値の変更範囲は、1~10かつ、ランダムに表示
・数値が7になったら「YOU WIN!」を表示し、ボタンを非表示にする
・Stateを使用すること

プログラミングの学習は、アウトプットが大切です。頑張りましょう。

サンプルを載せておきます。

StateとPropsの要約

StateとPropsの違いは、次の通りです。

TERMMUTABLEPURPOSE
stateyes可変のコンポーネントデータを格納
propsno不変のコンポーネントデータを格納

状態変化を伴う挙動(ステートフル)を取らせたい時はStateを使い、挙動を固定(ステートレス)にしたい場合は、Propsを使うといったイメージでしょうか。

次回

次回は、Stateのより発展した使い方を学んでいきましょう。

コメントを残す