React|Hooks 01(概要/状態/効果)

1. Intro
1-1. ホークスとは?

Reactには4種類のBuilt-In Hooksがあります

usState-基本とコア

useEffect-基本&コア

useRef

useReducer

ホークスとは?

関数構成部品で「バインド」「react state&ライフサイクル機能」(ライフサイクル特性)を使用できる関数です.

classで動作xを実行する
→classなしreactを有効にする

Hook(カスタムhook)を直接作成することもできます
→構成部品間のステータスロジックを再使用します.

1-2. なぜ使いますか.
:文書

構成部品間で状態論理を再利用することは困難である.

複雑な部品→分かりにくい

Class:混同者と機器

::クラス→キャビネット(Close)

類問題

state参照の値:常に最新のため、結果は保証されません.
(ex.人☆克follow,素早く人に従うと、最後のfollowのヒントウィンドウしか表示されません.)

◇ソリューション:モジュール(state,ライフサイクル実装)を関数コンポーネントに実装する
1-3. ルールの使用
ルール1:最上位レベルでのみ呼び出す

繰り返し文、条件文、ネスト関数でHookX

を実行

理由

シンボルをレンダリングするたびにhook

が同じ順序で呼び出されることを確認します.

                import React, { useState } from "react"

                function Hooks(props) {
                	if (!props.isExist) {
                		const [state, setState] = useState(); // Error!
                	}
                	const [state2, setState2] = useState(); // Error!
                }

                // react가 여러 훅들을 구분할 수 있는 유일한 정보는 훅이 사용된 순서 뿐이기 때문.

ルール2 react関数構成部品 でのみHookを呼び出す

それ以外:カスタムホームページ内

2. State Hook
2-1. useState

        const [state, setState] = useState(initialState);

初期レンダリング期間.
返された状態(state)==最初に渡されたパラメータ(initialState)の値

setState  n.関数

state更新時使用

新しいstate値を受信し、シンボルツリーレンダリングをキュー

に登録します.

                setState(newState + 1); // setState와 동일하게 비동기 업데이트
                setState(prev => prev + 1);

次回レンダリング時  useStateで返される最初の値は、常に最新の更新された状態

である.
2-2. Tips

まず、使い方に慣れる
-(既存のsetStateと同じ)非同期更新
-useState実行時にstateとsetStateのペアが付与されます

覚えておきたい概念

ゴミ収集
-関数の実行が完了すると、関数で使用されているすべてのメモリがクリーンアップされます.
-参照がないメモリに対して実行

エンクロージャ
-関数の実行が終了してもメモリに保持できるメソッド
-環境を作成した時点を記憶する関数

です.

                // 아주 간단한 버전의 useState

                const useState = (init = undefined) => {
                  let value = init

                  const getter = () => value // 클로저
                  const setter = next => (value = next) // 클로저

                  return [getter, setter]
                }

                const [state, setState] = useState('클로저')

                state()
                setState("어려워!")
                state()

2-3. FAQ

useState()良好な状態分割管理

一括変更により分割することが望ましい.

ステータス値を保存するにはどうすればいいですか?

関数保存状態x

もしCloserが出動したら?
-関数構成部品:管理可能ステータス(Hooks→stateを保存、useState)

useState()

関数

変数保存(エンクロージャ使用)

例

                    const useState = (init = undefined) => {
                      let value = init

                      const getter = () => value // 클로저
                      const setter = next => (value = next) // 클로저

                      return [getter, setter]
                    }

                    const [state, setState] = useState('클로저')

		- 두 함수 (`getter()`, `setter()` ): 배열 형태로 리턴
                - `useState`사용 시, 배열 구조분해 할당 형태 사용 다수

                → 일반적인 함수

                실행 종료(return)되고 나서 내부의 데이터들이 가비지 컬렉팅 되어야 됨

                → 이 경우

                내부 함수: 지역 변수 참조 → 안 사라짐

                외부로 노출된 getter, setter 함수를 통해 내부 변수에 지속적으로 접근하며 호출/재할당 가능

useState()非同期処理(第2パラメータ)方法

            // class component
            handleBtnColor = () => {
            	this.setState({
            		color: "red"
            	}, () => console.log(this.state.color))
            }

            // function component
            const [color, setColor] = useState("blue")

            const handleBtnColor = () => {
            	setColor("red")
            }

            useEffect(() => {
            	console.log(color)
            }, [color])

3. Effect Hook
3-1. useEffect

C o m ponentDidMount/componentDidUpdate/componentWillUnmountなどの目的+1つのAPI

に統合

        useEffect(function);

        useEffect(() => {}, [count]) // 의존성 배열 (배열 안에 담긴 값들을 추적, 그때 마다 업데이트)

≪パラメータ｜Parameters｜oraolap≫:コマンド・タイプまたは効果を生成する関数

関数の実行時間(setState)
-スクリーン上でレンダリングが完了したら実行します.
-既定の動作:すべてのレンダリングが完了した後に実行
- 値が変更された場合のみ  実行可能

使用方法

            useEffect(() => {
            	console.log("componentDidUpdate")
            })

            useEffect(() => {
            	console.log("componentDidMount")
            	return () => console.log("componentWillUnmount")
            }, [])

            useEffect(() => {
            	console.log("componentDidMount")
            	console.log("componentDidUpdate") // + shouldComponentUpdate
            	return () => console.log("componentWillUnmount")
            }, [state])

            // WRONG!!
            useEffect(() => {
            	console.log("CDM 쓰고 싶어요")
            }, [])

            useEffect(() => {
            	console.log("CDU 쓰고 싶어요")
            }, [state])

3-2. FAQ

関連しない論理:複数のuseEffectを使用して区切る

useEffectロール

レンダリング後に構成部品がどのように機能するかを示します.
→我々が渡した関数(「effect」と呼ばれる)を覚え、DOM更新を実行した後にロードする

この場合、effectで文書タイトルを指定し、データをインポートし、他のコマンドAPI

を呼び出すことができる

useEffectレンダリングのたびに実行(変更可能)

レンダリング後に発生したと考えられます

有効になるタイミング
DOMが更新されていることを確認

デフォルト:最初のレンダリングと 以降のすべての更新で実行
(  必要に応じてeffectを変更する方法 )

useEffect Advanced

useEffect vsライフサイクル
useEffect:複数のライフサイクルの組み合わせ

ComponentDidMount(依存配列:[])

shouldComponentUpdate(依存シナリオにない場合)

ComponentDidUpdate(ある場合)

componentWillUnmount

Render → Effect Callback → Clean Up!

            const Foo = () => {
              const [state, setState] = useState(0);

              console.log("render", state);

              useEffect(() => {
                console.log("useEffect Callback", state);
                return () => console.log("cleanUp", state);
              }, [state]);

              return <div onClick={() => setState(state + 1)}>하잉</div>;
            };

            export default Foo;

- 함수 body ⇒ `render`
- useEffect
   - 의존성 배열 : useEffect 내부에서 해당 값의 변화만(!) 감지
   - 클린업 함수 : 구독/해제 등 다음 effect 전에 이번 effect의 내용을 정리해야 할 때 사용

実際の操作

            render, 0
            useEffect Callback, 0
            // 클릭
            render, 1
            cleanUp, 0
            useEffect Callback, 1

CLINUP関数(次のレンダリングよりも)が先に実行される理由

レンダリング完了後に実行→効果

より良いux

を提供

effect実行時レンダリング完了保証

クリア関数値:古いサイクル値をインポートする理由

CLINUP関数作成時はエンクロージャとして(「自分が作成した環境の関数を記憶する」):以前のレンダリング時、つまり以前のレンダリング時を記憶する.