useStateの意味がよくわからなかったので、記事にします。
useStateとは、クラスコンポーネントを書かずに関数コンポーネントでstateとほぼ同じ機能ができる機能のようです。
stateの意味の前に、
Reactコンポーネントがデータを受け取ったり、ハンドリング(データを捕まえたり)、表示するための主要な方法として、StateとPropsがあります。
1、State:そのコンポーネントが持っている状態
2、Props：親コンポーネントから渡されたプロパティ
1、State(状態)
Stateは可変のデータであること。仮想DOMとの差分をとり、実際のDOMを更新し、コンポーネントを再描画するための基本的な方法
2、Props(プロパティ)
Propsは、一般的に、親コンポーネントから子コンポーネントに渡される値。
StateとPropsの使い分け
コンポーネントは必要に応じて内部のStateを自由に使用できますが、いい意味ではUI体験のために、直接外部のStateに接続する場合にはPropsで受け取るべきであるとのこと
参考文献：https://qiita.com/kyrieleison/items/78b3295ff3f37969ab50
では、本題のuseStateについて
useStateとは、基本のフックである。
基本のフック(Hook)とは、React 16.8で追加された新機能である。StateなどのReact機能を、クラスを書かずに使えるようになった。
useStateの初期値は、なんでも良い！！
0でも1でも、boolean系、文字列なんでもOK！！
※ただし、オブジェクトはだめ！！
例：
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の値を更新しようとするとそのプロパティだけ更新されますが、他が消えてしまう！！
もし、React Hookでオブジェクトを管理するならuseReducerで管理する←今はよくわかりません。
また、Reactを勉強してわかり次第記事にします。
以上です。
コメント