はじめに
おはようございます、Tunです。
今回は、前回の最後に記述した通りStateについて記載していきます。
State(useState)
hookはReact16.8で追加された新機能です。stateなどのReactの機能をクラスを書かずに使用できるようになりました。React.Componentからextendsしたクラスを使用せず、また、thisの起債も必要なくなり、コード自体もスッキリをスマートに書くことができます。
なぜReactにhookを新機能として追加したのかの背景はこちら(動機)へ
まずは例を見てみましょう。
import React, { useState } from 'react';
function Example(){
const [count, setCount] = useState(0);
return(
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
このコードは、ボタンをクリックすると、カウンターの値が増加する仕組みになっています。この中のuseStateがフック(hook) にあたります。関数コンポーネントのスコープ内でローカルなstateを使うために呼び出しており、このstateは以降の再レンダーの間も保持されます。
[count, setCount] = useState(0);の部分のcountは、現在のstate変数の状態の値を、setCountはstateの状態を更新するための関数を持っており、useStateがこれらをペアにして返しています。また、useStateはstateの初期値を唯一引数にとります。この引数として渡されたstateの初期値は最初のレンダー時のみに使用されます。
フック(hook)とは何ぞや
フックとは、関数コンポーネントstateやライフサイクルといったReactの機能を接続する(hook into) ための関数のこと。
フックはReactをクラスなしに使うための機能です。ですので、クラス内で使用することはできません。
以前まではクラスコンポーネント(React.Component)を使ってReact開発していましたが、2018年よりコードの削減・可読性の向上などの理由から、関数コンポーネントに移行していきました。その流れで、クラスコンポーネントしか使えない機能があり、いちいち関数からクラスへ書き換えを行うのは面倒だったためフックという機能が生まれました。
上記の例をもっと詳しく見てみましょう
-
useStateを呼ぶと何が起こるのか？
上記の例では変数をcountと名付けましたが、なんでも好きな名前を設定することができます。この変数に関数コールの間で値を保持しておきます。通常であれば、関数が終了すると変数は消えてしまいますが、state変数はReactによって保持されます。 -
useStateは何を返すのか？
現在のstateと、それを更新するために関数のペアを返します。これが[count, setCount] = useState();という書き方にした理由です。
countという名前のstate変数を宣言しており、それを初期値0でセットしています。再レンダー間でReactはその変数の現在値を記憶しており、最新の値を関数に提供しています。現在のcountの値を更新したい場合は、setCountを呼ぶことで可能になります。
stateの読み出し
また、関数内では直接countを使うことができます。
※クラスだとthisが必要になる。
<p>You clicked {count} times</p>
stateの更新
関数内では、すでにsetCountとcountを変数として受けとっているので、ここもthisは必要はありません。
<button onClick={() => setCount(count + 1)}>
Click me
</button>
これまでを振り返ると
-
useStateフックをReactからインポートし、関数コンポーネント内でローカルstateを使えるようにする。 - Exampleコンポーネント内で
useStateを呼び出すことで新しいstate変数を宣言します。変数と関数のペアが返されるので、任意の名前を付けます。useState唯一の引数として0を渡すことで、変数をゼロへと初期化します。setCountはcount を更新する関数になります。 - ユーザがクリックした時に、新しい値で
setCountを呼びます。ReactはExampleコンポーネントを再レンダーして新たなcountの値を渡します。
次回は副作用についてです！