ReactのHooksの使い方① -useState-

初心者のためのReact Hooks

なるたけ分かりやすく解説してみます。

話す内容

以下の流れで、話していきます。
1：Hooksとは？
2：簡単な使い方(useState)
3：API連携する際の使い方(Reactのフックの使い方②で解説します。)

3までいけば、実用的な使い方を少し習得できるかと思います。

そもそもHooksとは？

Hooksの導入は、React16.8以降からの機能です。stateなどの機能をクラス型ではなく、関数型で書けるようになったというのが特徴です。今まで、componentDidMount, componentDidUpdate, componentWillUnmountと書いてライフサイクルメソッドを回していましたが、フック使うことでより簡潔に書けることが出来ます。

使う際は、

import React, { useState } from 'react';

などと書いて使うことがほとんどです。

Hooksの種類は、カスタムフック（自分で作るオリジナルのフックのこと）をのぞいて、10種類あります。全て、必ずuseXXXから始まります。カスタムフックもuseXXXとするのが一般的です。

基本のHooks
・useState
・useEffect
・useContext

追加のHooks
・useReducer
・useCallback
・useMemo
・useRef
・useImperativeHandle
・useLayoutEffect
・useDebugValue

その中でも、基本のHooksが上3つ**(useState, useEffect, useContext)**なので、これを最初に使えるようにしましょう。今回の記事ではそのうちの1つ、useStateに絞って解説していきます。

簡単な使い方

説明だけ見てても、意味ないので早速使っていきましょう。
codesandboxを使用することとします。

リンクには、React環境とuseStateを使用する準備がされているので、追加でコードを書けば即時にHooksが使えます。

それでは、上のリンクを元に、Hooksの説明に入っていきます。

useStateの導入

１行目からですが、{ useState }となっていますよね。そもそも、useXXX系は、React側で宣言されている関数です。そのため、その関数を使うことを表記するために{useXXX}と明記して導入する必要があります。

押すとカウントが増えるボタンを作る

今回作るのはカウント型ボタンの作成です。ベースはこんな状態。

import React,{useState} from "react";
import "./styles.css";

export default function App() {
  return (
    <div className="App">
    </div>
  );
}

次に、useStateに現在の state の値と、それを更新するための関数とをペアにして返していきます。

export default function App() {
  // state = count, setCountがcountを更新するための関数。
  const [count, setCount] = useState(0);
  return (
    <div className="App">
    </div>
  );
}

ここでは、state変数を宣言しています。第一引数のcountは、状態を保持してくれるものです。第二引数のsetCountは、countを更新してくれるための関数です。
useState(0)の0は、stateの初期値です。

次に、関数(setCount)の部分を作っていきます。

export default function App() {
  const [count, setCount] = useState(0);
  return (
    <div className="App">
      // 下の部分が新たに追加。
      <p>You clicked {count} times</p>
      <button onClick={()=>setCount(count + 1)}>click me</button>
    </div>
  );
}

**{count}**の部分は、毎回button内にあるonClickメソッドが押されるたびに１ずつ増えていきます。buttonが押されると表示が変わる部分は、この {count} 部分です。

onClick={( )=>setCount(count + 1)}

今回、useState関数は

const [count, setCount] = useState(0);

と、**初期値を0としているため、0 + 1となり２が返されます。**これがもし

const [count, setCount] = useState(5);

初期値が5となっていれば、5 + 1なので、{count}は6になります。

完成したのは以下になります。ちょっと手を加えています。というのも、button自体にロジックを持たせるのはよくない為、buttonには関数を呼ぶことだけをしています。(handleClickの部分)
https://codesandbox.io/s/infallible-chatterjee-lb91e

まとめ

ReactのuseStateについて説明してみました。
次回は、Reactのフックの使い方②で、簡単なAPI実装を含めたフックの使い方を解説したいと思います。