【React.js】React hookを理解する! ~ useState編 ~

目次

React hookとは..?

React hookはReact16.8から追加された機能で、クラスコンポーネントでしか使用できなかったstateなどのReactの機能を関数コンポーネントで使用できる機能です。

公式ページは以下です。

この記事ではReact hookのAPIの1つであるuseStateについて紹介していこうと思います。

他のReact hookに関するAPIについても解説していますので、そちらもご覧ください。

useStateとは…?

useStateは関数コンポーネントでstateを管理するための機能です。

ここで管理とは、保持と更新を指します。

初回のレンダー時に返されるstateuseStateに第一引数に指定した値になります。

使い方

  • const [state, stateを更新する関数] = useState(初期値);のように使用します。
  • stateを更新する関数をラップした関数(例:updateFunction)を宣言します。
  • 変数名、関数名は任意で定義できます。
const [state, stateを更新する関数] = useState(初期値);

const updateFunction = () => {
    stateを更新する関数(stateの演算など);
};

実際にコードで書いてみました。例として、数字をカウントするカウンターコンポーネントを作ってみました。

// 関数コンポーネントで「useState」を使用するためにインポートする。
import React, { useState } from 'react';
import '../style.css';

const Counter = () => {
    // coutner:stateを宣言する。
    // setCoutner:stateを更新する関数を宣言する。
    // useStateの引数はcoutnerの初期値を指定する。
    const [counter, setCounter] = useState(0);

    // counterを+1する関数を定義する。
    const countUp = () => {
        setCounter(counter + 1);
    };

    // counterを-1する関数を定義する。
    const countDown = () => {
        setCounter(counter - 1);
    };

    // boolも使用可能。
    const [isVisible, setVisibility] = useState(true);

    // isVisibleを反転する関数を定義する。
    const updateVisibility = () => {
        setVisibility(!isVisible);
    };

    return (
        <>
            <button onClick={updateVisibility}>
                {isVisible ? '非表示にする' : '表示する'}
            </button>
            <div className={isVisible ? 'visible' : 'invisible'}>
                <p>現在の数値は{counter}です。</p>
                <button onClick={countUp}>+1</button>
                <button onClick={countDown}>-1</button>
            </div>
            <div className='line'></div>
        </>
    )
}

export default Counter
import React from 'react';
import { Counter } from './components/index';

function App() {
  return (
    <div>
      <p>useStateのサンプルです</p>
      <Counter />
    </div>
  );
}

export default App;

以下のように動作します。

再レンダリング後は、stateの更新関数によって更新されたstateの値を保持することになります。

まとめ

今回の記事ではuseStateを紹介しました。

次回はuseEffectを紹介しようと思います。

参考

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次