💡

Reactの基本を学ぶ　Hooks:useState偏

2021/07/24に公開

React

React-Hooksの基本について学びつつ、記録を残していきたいと思います。

まずは一番利用頻度の高いと思われるuseStateから。

useStateとは

useState()は、関数コンポーネントでstateを管理するためのReact-hooksである。
stateとは【状態】の事。
下記のような画面上に表示したい数字に限らず、様々なデータ、状態を変化させたいものをstateとして管理する事ができる。

useStateの基本形

const [state,setState] = useState(initialState)

上記の基本形の解説をすると

state: 状態を変化させたいもの
setState: 状態を変更するための関数名前に決まりはないがキャメルケースを用いてstateで定義したものと名前を合わせるのが基本。setStateなど。
useState: React-Hooks
initialState:状態の初期値。number,string,booleanに限らず何でも入る。引数として関数を渡して初回のみレンダリングを実行するなどの技もある。今回は省略。

実際に使ってみる

//ここを忘れずに！
import { useState } from 'react';

const App = () => {

  //関数コンポーネントの中でしか使用出来ません。
  //countという名前でstateを定義 setCountはcountを更新する為の関数 初期値は0
  const [count, setCount] = useState(0);

  // それぞれ countを+1,-1する為の関数を定義。
  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);

この時、count ++って書けばいいんじゃない？って思いますが、
それだとエラーが出ます。++だと定数して宣言しているcountに再代入するという挙動なんですね。豆知識です。
以上の事を踏まえると以下の挙動も理解しやすいかもしれません。
定義されている+1する為のincrement関数を2回実行して+2する為の関数を用意したとします。

  const incrementDouble = () => {
    increment();
    increment();
  };

この書き方、実際にはincrement()が2回実行されているにも関わらず、+1しかされません。
やっていることは更新される前のcountという定数に+1するという処理を2回やっているだけなのです。

正しい書き方

  const increment2 = () => setCount((prevCount) => prevCount + 1);
  const decrement2 = () => setCount((prevCount) => prevCount - 1);

こちらの書き方、一見複雑に見えますが、引数として渡されているprevCountというのは現在の値でその値を+1,-1するという処理になっています。実際の挙動としてはこちらの書き方が正しいのでしょう。

おまけ

今回の練習で書いたおまけです。上記のコードと繋げて書いておくので挙動を自分の環境で試したり遊んでくれたらうれしいです。

import { useState } from 'react';

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

  const increment = () => setCount(count + 1);
  const incrementDouble = () => {
    increment();
    increment();
  };
  const decrement = () => setCount(count - 1);

  const increment2 = () => setCount((prevCount) => prevCount + 1);
  const increment2Double = () => {
    increment2();
    increment2();
  };
  const decrement2 = () => setCount((prevCount) => prevCount - 1);

  const reset = () => setCount(0);
  const double = () => setCount(count * 2);
  const divideThree = () =>
    setCount((prevCount) => (prevCount % 3 === 0 ? prevCount / 3 : prevCount));

  return (
    <>
      <div className='App'>count: {count}</div>
      <br />
      <div>
        <span>通常の関数型</span>
        <button onClick={increment}>+1</button>
        <button onClick={incrementDouble}>+2にしたい</button>
        <button onClick={decrement}>-1</button>
      </div>
      <br />
      <div>
        <span>引数として元の値を受け取る型</span>
        <button onClick={increment2}>+1</button>
        <button onClick={increment2Double}>+2</button>
        <button onClick={decrement2}>-1</button>
      </div>
      <br />
      <button onClick={reset}>Reset</button>
      <button onClick={double}>*2</button>
      <button onClick={divideThree}>3の倍数の時だけ3でわる</button>
    </>
  );
}

export default App;

useStateとは

useStateの基本形

実際に使ってみる

正しい書き方

おまけ

Discussion