🐘 ReactのuseStateとuseRef
作成日: 2021/11/28
0

共通点

レンダリングが発生しても、中の値は保持される

相違点

useState useRef
値を更新した際のレンダリングの有無 あり なし
値の更新の仕方 値更新用の関数を用いる name.current に代入
値の取り出し方 useState を使用する際に指定した変数から取り出す name.current に格納されている

使用例

useState

生成

/* パターン1:初期値を指定する */
const [number, changeNum] = React.useState(1); // stateを生成 初期値は1

/* パターン2:初期値を指定しない */
const [number, changeNum] = React.useState(); // stateを生成 初期値はなし

更新

/* パターン1:ダイレクトに変更後の値を指定 */
changeNum(3); // numberを3に更新

/* パターン2:値を増やす */
changeNum(value => value + 1); // numberを1増やす

関数の引数に関数を指定することができます。
この場合、引数の関数の引数(value)には現時点の number の値が代入されます。
そして、引数の関数の戻り値が number に代入されます。
(先の例は特殊なパターンなので return が省略されています)

また、state の値を更新するとレンダリングが実行されます。

取り出し

console.log(number);

useRef

生成

/* パターン1:初期値を指定する */
const number = React.useRef(1); // refを生成 初期値は1

/* パターン2:初期値を指定しない */
const number = React.useRef(); // refを生成 初期値はなし

更新

number.current = 3;

取り出し

console.log(number.current); // 出力結果=>3

プログラミング初心者です。 Webアプリを開発しています。 主に積み上げを記録していきます。