ReactHooksとは
ReactHooksはReact16で追加された比較的新しい機能です。
クラスコンポーネントでしか扱えなかったstateなどReactの機能関数コンポーネントでも扱うことができるようになりました。
ここではstateを管理するuseStateを見ていきます
stateとは
stateとはデータを動的に更新するための仕組みです。
様々な状態を画面は持っています。
状態の例
・ボタンが押された/まだ押されていない
・テキストボックスに入力された/されていない
・モーダルウィンドウが開いている/開いていない
このような画面の「状態」をstateとして管理し、stateが更新されるとコンポーネントが再描画されてUIや挙動が変わっていきます。
useState
関数コンポーネントではReactHooksのうちuseStateというメソッドを用いてstateを扱っていきます。
useStateのimport
使用するにはuseStateのimportをします
import { useState } from "react";
useState定義の仕方
宣言方法はまずuseStateのメソッドに状態の初期値をセットします。
useStateメソッドの返却値として、constで定数宣言し配列の形で1つめにstateの変数、2つめにstateを更新するための関数を設定しています。
const [状態変数,状態を更新するための関数] = useState(状態の初期値)
実際のコード例で見ていきましょう。
import { useState } from "react";
function CountApp() {
//useStateフックを使ってcountという状態変数を作成し初期値を0に設定しています。
//状態を更新するための関数はsetCountです。
const [count, setCount] = useState(0);
//countの値を1つ増やすための関数
const increCount = () => {
//状態を更新するための関数であるsetCountを使用してcountの値を1つ増やしています
setCount(count + 1);
};
return (
<div>
<p>現在のカウント数： {count} 回</p>
{/* ボタンがクリックされたときにincreCountを呼びだす*/}
<button onClick={increCount}>カウントボタン</button>
</div>
);
}
export default CountApp;
useStateのフックを利用してcountという状態変数を作成します。
useStateの初期値として0を渡し、ボタンがクリックされるたびにincreCountという関数が呼ばれ
setCountを使用して、countの値を1つ増やしています。
