素子が難しい

反応素子の管理と可視化は困難である.勉強の中で一番難しい部分は、新しいことを勉強するときではなく、自分の基礎を磨くことです.

ライフサイクル

反応フックを理解するためには、基本的にライフサイクルを知る必要があります.デフォルトでは、useEffectは、構成部品のロード後に実行される動作を管理します.
素子の初回動作時をmountと呼ぶ.class素子で反応を組織するには特定の時点で設定する必要がありますが、関数の現在の素子のhookは複雑なプロセスを変更し、ユーザーが簡単に調整できるようにします.
しかし,反応器のライフサイクルを説明するためには,各段階を理解する必要がある.

componentWillMount

構成部品を最初に呼び出すと、context、props、およびstateが保存され、componentWillMountが呼び出されます.素子がmountより前の状態を示す.ここで注意したいのは、構成部品がロードされた状態にあるため、propsまたはstateを変更すると構成部品をロードできません.

componentDidMount

componentWillMountが呼び出されると、要素がマウントされ、componentDidMountが呼び出される.これは、応答素子がロードされた後であることを意味する.
ロードされた構成部品の値を変更するときに新しい構成部品を作成して再マウントすると、反応は現在の反応になりますか?最初は反応の本質を無視する問題だった.ほほほ

componentDidUpdate

構成部品の値を変更すると、[リアクション](Reactions)ページで構成部品を更新できます.
更新前の値が変更されたことを検出し、複数のメソッドを呼び出して更新を完了します.新しく交換した構成部品のレンダリングが完了すると、そのスライドアップはcomponentDidUpdateと呼ばれます.

componentWillUnmount

最後に、要素が除去された状態はcomponentWillUnmountである.
反応器のライフサイクルはこのように4つの過程を繰り返す.
関数構成部品のhookは、ステータスを管理するたびにすべてのプロセスを記述する必要があるため、負を完全に置き換えます.

useEffect

useEffectは大きな簡略化であり、反応に革命をもたらす.

useEffect(() => {

}, [])

基本構造は、パラメータ콜백함수およびdependencyである.dependencyを受け入れない場合もあります.dependencyがなく、コールバック関数のみがある場合は、構成部品をロードするたびに動作が実行されることを示し、アレイ形式で受信したdependencyのステータスが更新された場合、および構成部品を最初にロードした場合に、この動作が実行されます.空の配列を受信すると、関数は最初の構成部品の作成時にのみ実行されます.
構成部品の特定の値が変化すると、構成部品の更新と初期作成の処理に最後のプロセスが欠けます.
間違いない.componentWillUnmountプロセスを処理する必要があります.
たとえば、タイマを使用している場合は、タイマを終了するコードを記述する必要があります.

useEffect(() => {

	rreturn () => {}

}, [])

関数に関数を返すと、その関数は実行され、終了します.
驚くべきことに、私たちは4つの方法を1つの形式に整理しました.
サンプルコードを見て、どのように書かれているか見てみましょう.

サンプルコード

import React, {useState, useEffect} from 'react'
import Timer './TImer'
const App = () => {
	const [showTimer, setshowTimer] = useState(false)
	return (
    	<div>
        	{showTimer && <Timer/>}
        	<button onClick=(() => setShowTimer(!showTimer))>toggle</button>
        </div>
    )

}

export default App
---------------------
export default const Timer = () => {
	usseEffect(() => {
    	
    	const timer = setInterval(() => {
        	console.log('타이머가 작동 중')
        }, 1000)
        
        // clean up
        return () => {
        	clearInterval(timer)
        }
    }, [])
    // 처음 컴포넌트가 랜더링 되었을 때만
}

注意事項

useEffectは本当に必要な関数です.ただし、多く使用すると、レンダリング時の構成部品の最適化が困難になります.
これは、子構成部品にuseEffectがある場合、親構成部品の再アップロード時に呼び出しが続行されるためです.従って、最適化のために、反応器構造をpresent、container構造に適切に編成しなければならない.
この部分が一番難しいです.率直に言って、反応パターンの理解はまだ不足している.useEffectの代わりにuseCallbackを使って再掲載を阻止することはできますが、これは大雑把な方法にすぎません.
最適化のために使用効果を減らすのではなく、どれだけ良いモードの反応アプリケーションを作るかに集中します.
早く反応パターンを学びましょう!