[TIL] 20210512_React Hook_part1
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]);
Reference
この問題について([TIL] 20210512_React Hook_part1), 我々は、より多くの情報をここで見つけました
https://velog.io/@still3028/TIL-20210512React-Hook
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
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]);
Reference
この問題について([TIL] 20210512_React Hook_part1), 我々は、より多くの情報をここで見つけました
https://velog.io/@still3028/TIL-20210512React-Hook
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
import React, { useState, useEffect } from 'react';
useEffect(() => {
console.log("useEffect가 실행됩니다.");
});
useEffect(() => {
console.log("useEffect가 실행됩니다.");
}, [age]);
useEffect(() => {
console.log("useEffect가 실행됩니다.");
}, [age, isHuman]);
Reference
この問題について([TIL] 20210512_React Hook_part1), 我々は、より多くの情報をここで見つけました https://velog.io/@still3028/TIL-20210512React-Hookテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol