Reactガイドを読んでいくその245

これは

Reactのガイドを読んでいく記事です。

ガイドのリンク

ja.reactjs.org

ステートフックの利用法

state 変数の宣言

クラスを使った動作では、コンストラク内でthis.stateを{ count: 0}にセットする方法で、
stateであるcountを０へと初期化する。

関数コンポーネントにはthisは存在しないことからthis.stateを読み書きすることはできない。
コンポーネントのuseStateフックを代わりに使う。

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

useStateを呼ぶと何が起きるのか
これによりstate変数が宣言される。
命名は自由に設定でき、クラスでthis.stateが提供するのと同じ機能を実現するための方法になる。

引数としてuseStateに何を渡すのか？
フックの唯一の引数はstateの初期値になる。
クラスとは異なり、stateはオブジェクトである必要はない。
数字や文字列が欲しいだけであればそれらを保持することができる。

useStateは何を返すのか？
現在のstateとそれを更新するための関数とをペアにして返す。

countと言う名前のstate変数を宣言していて、それを0にセットする。
再レンダー間でReactはその変数の現在値を記憶しており、最新の値を関数に渡す。

今日はここまで