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 = () => {
 // ボタンを押して１ずつカウントアップします
 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でのオブジェクト管理はやめましょう！