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でのオブジェクト管理はやめましょう!
Author And Source
この問題について(useStateについて), 我々は、より多くの情報をここで見つけました https://qiita.com/makkkiy/items/8bd0cf7814248852d7ff著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .