React16.8より以前はstateの管理をするためにclassコンポーネントを使用していました。
しかしReact16.8からHooksが登場し、関数コンポーネントでもstateの管理ができるようになりました。
これにより記述量が少なくなり、state管理が非常に楽になったので、現在はHooksを使用するのが狩猟となっております。
そこで今回から、React Hooksについて説明をしようと思います。
state管理とは
ウェブサイトなどで、テキストの入力欄に入力された文字や、チェックボックスなどで選択された項目など、利用者の操作によってデータは変更や追加されます。この変更されるデータのことをstateと呼び、このデータを管理することをstate管理と言います。
PCやスマホを利用する方であれば、WEBサービスなどのログイン画面を想像していただくと分かりやすいかと思います。
ログイン画面では、メールアドレスやIDとパスワードを入力しますよね。
この時に入力されたログイン情報がstateです。
入力された情報はログイン画面が表示されている間は、利用者の入力に応じて常に変更され、ログインボタンがクリックされるまではその変更内容を保持します。
そして、ログインボタンがクリックされたとき保持していたstateを認証情報と照らし合わせて、合致している場合にログインが成功する仕組みになっています。
React Hooksが登場する以前は関数コンポーネントにはstate管理の機能がなく、クラスコンポーネントを使用する必要がありました。
クラスコンポーネントの場合はstate管理が前提となっているため、記述量が多くなってしまいます。
そこで、React Hooksが登場し、関数コンポーネントでも少ない記述量でstateの管理ができるようになりました。
ライフサイクル
もう一つReact Hooksを学ぶ上で知っておく必要があるのがライフサイクルです。
ライフサイクルとは、マウント、更新、アンマウントの３フェーズからなるサイクルのことで、先ほどのログインページの例いうと、最初にログインページが表示されるまでをマウント、ログイン情報を入力してstateが変更されている間を更新、ログインボタンがクリックされてログイン画面の表示が終了するまでがアンマウントとなります。
ログイン後にマイページなどが表示されるところから、また次のサイクルが開始します。
クラスコンポーネントの場合だと、常にstateの管理がされるため、このライフサイクルについて、コードで記述してフェーズの移行を行う必要がありました。
このライフサイクルの概念がReact Hooksにより強く意識する必要がなくなりました。
Hooksの種類
よく使うHooksを３つご紹介します。
ここで紹介するもの以外にもHooksは用意されていますが、代用できるライブラリがあるなど使用頻度が少ないので、必要に応じて別の機会にご紹介したいと思います。
useState
Hooksの中で最も使用するのがこのuseStateです。
useStateは文字通りstateを管理するために使用します。
useStateの使用方法としては、まず初めに以下の記述でStateの初期状態を宣言します。
const [text, setText] = useState<string>();
textとsetTextは任意の文字列とすることができるので、管理したいstateに合わせて分かりやすい名前にすることをおすすめします。
上記の例ではtextという名前でstateが管理され、textで管理されるデータは文字列型となっており、初期値は空（）となっています。
以前の記事で、constで宣言した定数は中身を変更することができないと説明しておりますが、このuseStateについては中身のデータを変更することができます。
変更方法はsetText()を使用します。
setText()のカッコ内に更新するデータを入力すると、そのコードが実行された際にstateが更新されます。
また、stateを呼び出す方法はtextと記述するだけで、stateのデータを参照することができるの非常に簡単です。
useEffect
useStateは利用者の操作によってstateを書き換えられていましたが、useEffectを使用すると、ライフサイクルが切り替わる際に、関数を実行したり、さらにstateを更新したりすることができます。
これを副作用のHookと呼んでおります。
useEffectの使い方は以下となります。
useEffect(() => {
// ここに実行したい処理を記述する。
})この記述によりライフサイクル更新が発生した場合に{}内の処理が実行されます。
また、第二引数を渡すことで処理の発動を限定することができます。
第二引数は、以下のように[]の中に記述されます。
useEffect(() => {
// ここに実行したい処理を記述する。
},[])また、[]内にstate名を記述すると、そのstateが更新された際に処理を実行することができます。
例えば、以下の場合だと、setTextが実行され、textのstateが更新されることによって処理が実行します。
useEffect(() => {
// ここに実行したい処理を記述する。
},[text])useContext
もう一つ紹介しておくのがこちらのuseContextです。
useContextはコンポーネント間でデータを受け渡す際に使用します。
これによって、コンポーネント間をpropsで受け渡さずに元のコンポーネントからへ直接参照することができるのでpropsリレーをする必要がなく、データの管理が簡単になります。
useContextについては使用方法が少し複雑なので、実際に使用する際に改めて使用方法を説明させていただきます。
まとめ
- React16.8からReact Hooksが登場し、関数コンポーネントでstate管理ができるようになった。
- stateとは利用者の操作によって状態が変更されるデータのこと
- ライフサイクルはウェブサイトなどが表示されたり、内容が更新されることで発生するサイクルのこと
- useStateはstateを管理する際に使用する
- useEffectはライフサイクルの移行時に特定の処理を発生させる
- useContextはコンポーネント間のデータの受け渡しをすることができる。
この記事は役に立ちましたか？
もし参考になりましたら、下記のボタンで教えてください。
コメント