Why React Hook?

以前は、クラス構成部品を使用して構成部品のステータスを管理する必要がありました.
ただし、React Hookでは、関数要素のステータス管理を許可します.
そして.
応答式ドキュメントによれば、クラスは「コードの最小化が困難になり、熱再ロードが壊れやすく、信頼性が低い」.
多くの場合、「リトラクト」を使用する関数要素は、クラス要素よりも優れています.
ステータス管理を「ステータスホスト」と「Side Effectホスト」に分けます.

Side Effectとは?

スクリーン上で反応素子をレンダリングした後、非同期で処理しなければならない副次的な効果は、通常、「Side Effect」と呼ばれます.

State Hook - useState

State Hook(useState)は、関数要素のステータス管理を許可します.
使用方法は次のとおりです.まず「react」からusStateを取得します.

import React, { useState } from 'react';

ステータス変数、ステータス更新関数宣言

USStateを受け取ったら、実際の使い方を理解してみましょう.
useStateは、現在のstate値と、その値を更新する関数とをペアリングします.
構造分解割当宣言name変数とsetName関数を使用すると、ステータスと関数をより簡単に使用できます.
変数と関数の名前はカスタマイズされていますが、暗黙のルールがあるようです.変数名がsomethingの場合、関数名はsetSomethingです.しかし、これは法則ではありません.

// 암묵적인 룰
// const [something, setSomething] = useState();

const [name, setName] = useState();

setNameは、管理するステータスの名前と、管理するステータスの関数の名前として指定されています.
USStateメソッドを使用すると、ステータスに初期値を指定できます.USStateメソッドのパラメータを使用して必要な値を指定すると、管理するステータスの初期値になります.

const [name, setName] = useState('banny');

「banny」はnameステータスの初期値として指定されています.
また、次のように複数のステータス変数を宣言することもできます.

const [age, setAge] = useState(20);
const [job, setJob] = useState('developer');

使用状態

クラス構成部品のthis.ステータスにアクセスする必要があります.
ただし、関数要素から直接ステータスにアクセスできます.ステータスと関数宣言時に構造分解割り当て(destructing)が行われているため、アクセスが容易です.
上記で宣言したステータスを使用します.

<p>제 이름은 {name}입니다.</p>
<p>제 나이는 {age}세 입니다.</p>
<p>제 직업은 {job}입니다.</p>

ステータスの更新

では、更新状態の関数をどのように使うのでしょうか.
次の例では、ボタンをクリックしたときにステータスをリフレッシュする関数を実行します.

<button onClick={() => setName(name + "가 아니라 반석쓰")}>이름 변경</button>
<button onClick={() => setAge(age + 1)}>
  {age >= 30 ? <span>그만하세요</span> : <span>나이 올리기</span>}
</button>
<button onClick={() => setJob(job + "!")}>자부심 추가</button>

ステータス画面をリフレッシュします.

state更新関数は既存のstateを覚えています.
ステータス変数とステータス更新関数を宣言し、関数構成部品内でステータスを管理するには、usStateメソッドを使用します.😆😆

Effect Hook - useEffect

Effect Hook(すなわちUSEffect)は、関数要素内でSide Effectを実行することを可能にする.
フィードバックされた正式なドキュメントによれば、「userEffect Hookは、コンポーネントDidMountとコンポーネントDidUpdate、およびコンポーネントWillUnmountの組合せと見なすことができます.」
使用法はuseStateと同じです.useStateと同様にreactから受信します.

import React, { useState, useEffect } from 'react';

userStateメソッドは、レンダリング後に毎回実行されることを覚えておいてください.

2番目のパラメータ

userEffectメソッドでは、コールバック関数が最初のパラメータとして使用されます.
2番目のパラメータには、オプションでステータス変数が含まれます.
もしそうなら,2番目の因子を与えたときと与えられなかったときを分けて見る.

2番目のパラメータがない場合

useEffect(() => {
  console.log("useEffect가 실행됩니다.");
});

2番目のパラメータが指定されていない場合、多くのステータスのいずれかが変更されると、userEffectメソッドが実行されます.百聞は一見にしかず.コンソールから表示します.

2番目のパラメータがある場合:

今回は2番目のパラメータを指定しました.前述したように、2番目のパラメータには状態変数が含まれます.
また、指定されたステータス更新時にのみ、usEffectメソッドが実行されます.
「ageというステータスを2番目のパラメータとして指定しました.」userEffectは、「年配」ボタンをクリックした場合にのみ実行されます.コンソールにアクセスしてください.

useEffect(() => {
  console.log("useEffect가 실행됩니다.");
}, [age]);

2番目のパラメータを使用して複数のステータスを指定することもできます.ステータスが更新された場合にのみ、usEffectメソッドが実行されます.

useEffect(() => {
  console.log("useEffect가 실행됩니다.");
}, [age, isHuman]);