React

useState

コンポーネントによって変更された値をuseStateで管理する

Hooksタイプの1つ

レスポンスパッケージからのロードuseState関数

import React, { useState } from 'react'

const [현재 상태, Setter함수] = useState()形式

Setter関数のパラメータ伝達値が最新の状態

オブジェクトを変更するときに、直接変更するのではなく、新しいオブジェクトを作成し、そのステータスを使用します.

❌ inputs[name] = value;

⭕
setInputs({
  ...inputs,
  [name]: value
 });

useEffect

インストール/アンインストール/更新時に実行するアクションの設定

1番目のパラメータには関数が含まれ、2番目のパラメータには依存値の配列(deps)が含まれます.

deps特定値を入れた後

初めて部品を取り付けた時も呼び出す

指定値が変化した場合に呼び出す

・deps中に特定の値が入っていればアンインストール時にも呼び出される

変換値の前でも呼び出す

depsパラメータを省略すると

構成部品を再レンダリングするたびに呼び出される

useEffect内使用状態、またはprops

useEffect医deps入れ(最新状態を示す)

useEffectの後整理使用cleanup関数

マウント時のタスク

props受け取った値を素子のローカル状態に設定

外部APIリクエスト(REST API等)

使用庫

アンインストール操作

ライブラリインスタンスの削除

useReducer

ぶんりじょうたいこうしんロジック

ステータス更新ロジックは、構成部品以外に作成してもよいし、他のファイルに作成してロードしてもよい.

reducer(state, action)

現在の状態と動作対象をパラメータとして、新しい状態を返す関数

戻った状態は素子が持つ新しい状態

action更新用情報

const [state, dispatch] = useReducer(reducer, initialState)形式

・stateこれから素子で使える状態です

dispatch動作を生成する関数です

VELOPERTのブログで勉強内容をまとめました!