🌐
【React】stateを簡単なサンプルコードで理解して使えるようにする
この記事の対象者
* Reactを学び始めた同士の方
* stateを復習したい方
* 通りすがりの方
学べること
簡単なサンプルコードと共に以下の３点について書かれています。
- stateって何
- stateを使った実装方法
- useStateフックって何
stateとは
公式のリファレンス[1]には、
コンポーネント固有のメモリのことを state と呼びます。
と書かれてますので、以下の解釈で良いかと思います。
- stateは状態を保持しておくコンポーネントのメモリのこと。
普通の変数
stateを実際に使っていきたいのですが、まずは旨味を知るために普通の変数で簡単なコードを実装します。ボタンを押しても変化がありません。
countUp関数では確かにcountに+1していますが、以下の理由で数字が加算されません。
- 普通の変数の値はレンダリング間で保持されない：コンポーネントが再レンダリングされるとき、変数の過去の変更は考慮されません。
- 普通の変数の値が変更されても自動でレンダリングされない：Reactちゃんはただの変数には興味ありません！
stateは上記2つの問題を解決します。特にuseStateフックでは以下の機能を提供します。
- stateの値はレンダリング間で保持される：state変数
- stateの値が変更されると再レンダリングされる：stateのセッタ関数
stateを使った実装
では、stateを使って実装してみます。正常に数字が加算されますね。
ボタンクリック時のイベントでcountUp関数が呼ばれる部分は同じにしています。
差分の解説をしていきます。
+ import { useState } from "react";
state変数を追加するにはuseStateをインポートします。
- let count = 0
+ const[count, setCount] = useState(0);
state変数としてcount、countの値を変更するセッタ関数としてsetCountを定義しています。引数の0は初期値です。
//countUp関数内
- count = count + 1;
+ setCount(count + 1);
countの値を変更する際はセッタ関数を使用します。
useStateフック
フックはstateを扱える便利な関数という感じでしょうか。
特にuseStateは以下のようにstateの管理をします。
- useState関数はコンポーネントがレンダリングされる度に、state変数とそのセッタ関数を返します。引数には初期値を渡します。
- そして、そのセッタ関数でstateの変更があると再レンダリングされます。
- レンダリングされるとuseState関数は、変更されたstate変数とそのセッタ関数を返します。
- そして、そのセッタ関数で...
まとめ
- stateはReactでコンポーネントの状態を保持しておくメモリのこと
- フックを使ってstateの状態を簡単に管理できる
Discussion