useState
React Hooksで追加された機能.
FunctionalComponentでStateを利用する際に用いる.
code:.ts
import React, { useState } from 'react';
const count, changeCount = useState(0); // count の初期値を0とする
const text, setText = useState(() => {
const someText = someFunction();
return someText; // useStateの引数に関数を渡すと複雑な処理によって初期化することもできる
};
const onClickReset = () => changeCount(0);
// 無名関数を引数に渡すと直前の状態が無名関数の引数として渡される.
const onClickPlus = () => changeCount(i => i + 1);
FunctionalComponentのトップレベルでしか宣言できない.
推奨: Stateの数だけuseStateを用いる.
code:.ts
const Foo = () => {
const count, changeCount = useState(0);
const name, changeName = useState('');
...
}
#React