useStateについて


React useStateについて学んでみました!

useStateとは?

そもそもuseStateとは何かわからなかったので調べてみました!

useState = 基本のフックです!

じゃあ、基本のフックとは...?

「フック (hook) は React 16.8 で追加された新機能です。
state などの React の機能を、クラスを書かずに使えるようになります。」

https://ja.reactjs.org/docs/hooks-state.html

とのこと。...まとめると
クラスを書かずにFC(Function Component)でクラスコンポーネントのstateとほぼ同じことができる新機能!
らしいです。

hook

調べてみるとhookには他にも色々あります。

  • 基本のフック

    • useState
    • useEffect
    • useContext
  • 追加のフック

    • useReducer
    • useCallback
    • useMemo
    • useRef
    • useImperativeHandle
    • useLayoutEffect
    • useDebugValue

useStateを使ったカウントアップ

今回はuseStateを使ってカウントした数を数えるためのカウントアップボタン

import React, { useState } from 'react';
const Test = () => {
 // まず定義します。
 const [count, setCount] = useState(0);
 // countはただの変数
 // setCountはcountに値を入れるためだけの関数
 // useState(0)の0はcountの初期値

 const countUp = () => {
 // ボタンを押して1ずつカウントアップします
 setCount(count + 1)
 }

 return (
  <button onClick={countUp}>
   {`ボタン${count}`}
  </button>
 )
}

やってみた

注意点

useStateの初期値はなんでも良くて、0でも1でも、boolean系、文字列なんでもありです。
ただし、オブジェクトはダメです!!!

class componnentだと...

this.setState({ test1: 3 });

↑っとやるとそのプロパティだけ更新されます。

ですが、useStateは違います。

// オブジェクトを定義
const [test, setTest] = useState({
   test1: 1,
   test2: 2
 });

const countUp = () => {
    console.log("countUp-test", test);
    setTest({ test1: 3 });
  };

  return (
    <div className="App">
      <button className="buttonView" onClick={countUp}>{`ボタン`}</button>
    </div>
  );

testオブジェクトのtest1の値を更新しようとするとそのプロパティだけ更新されますが、他が消えてしまいます!!

やってみた

useStateでのオブジェクト管理はやめましょう!