Open2021/03/15にコメント追加1

【React】useState入門

React

yu.miyoshi

概要

useStateによるステートフックについて記述していきます。

ステートフック

ステートフックはステートのためのフックです。
まず、ステートとは値をコンポーネント内で保持し、その値を更新することで表示も更新できる値です。
ステートフックはuseStateという形でReactで用意されています。

const [変数A, 変数B] = useState( 初期値 )

useStateでステートを作成し、"初期値"を指定する。

変数A：ステートの値。ここから現在のステートの値が得られる。
変数B：ステートの値を変更する関数。この変数に引数を付けて呼び出すことでステートの値が変更される。

import React, { useState } from 'react'

function App() {
  const [message] = useState("hogehoge")
  return (
    <div>
      <h1>{ message }</h1>
    </div>
  );
}

export default App;

単純ですがステートを設定し、それを取り出すだけです。
ステートの値を取り出して、表示するだけであれば変数Bの値は記述しなくてokです。

ステートによる値の変更処理

import React, { useState } from 'react'

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

  const clickFunc = () => {
    setCount(count + 1)
  }

  return (
    <div>
      <div>
        <p>click: {count} です。</p>
        <button onClick={clickFunc}>
          Click here
        </button>
        </div>
    </div>
  );
}

export default App;

超基本動作ですが、ここからステートをスタートしてみるとよいかと思います。

参考サイト

(2021/3 現在第2版がおすすめです。)