useCallback & useMemo

プログラミングでは、本当に「再利用」という言葉をたくさん見ました.最初のプログラミングから、関数の概念を学ぶときにずっと見ていた単語が繰り返し使われています.

再使用の定義

非プログラミング再利用の社会的意義は
環境用語
再利用にはどんなメリットがありますか?
歯ブラシが一度の用品であれば、地球は歯ブラシに満ちた地球を体験することができる.一度使用した歯ブラシのため、歯を磨くのに便利です.
プログラミングでの再利用は何ですか?
まず、アプリケーションやサービスを作成するときに、構成されるコンポーネントは1つから10つまで異なります.
一部の構成部品は、少し同じ、少し同じ、または完全に同じ、またはすべて異なる場合があります.全てが異なる場合は、再利用はできませんが、同じ場合があれば貼り付けて使うと便利です.
コピーすると面倒なので、関数の概念を使って完璧な再利用を作成できます.
この再利用はプログラミングにおいて非常に重要な問題である.反応器もプログラミングされており、反応器の再利用も重要です.
単純にコンポーネント化するのではなく、対応する関数や値を格納し、必要な場所で使用します.最適化方法は「オブジェクト化」と呼ばれます.
Memoizationとは、以前に計算した値をキャッシュし、必要に応じてメモリから取り出して再使用する方法です.
.####キャッシュは
Hookの勉強を続ける前に、Cassingとは何かを知るべきだ.useMemoとuseCallbackはいずれもキャッシュを用いて最適化する方法であるため,キャッシュについて予め理解する必要がある.
キャッシュとは、キャッシュと呼ばれるより高速なメモリ領域にデータをインポートしてデータにアクセスする方法です.
コンピュータシステムの性能を向上させるため、CPUチップ内でキャッシュは非常に高価なメモリである.プログラム内で直接読み込んで使用するわけではありませんが、ほとんどのプログラムは使用済みのデータを再使用し、その周辺のデータにアクセスする可能性があります.これらのプロパティを使用すると、大容量のデータをキャッシュにロードし、必要に応じて最初に検索および書き込みできます.そのため、より高い性能を発揮することができます.
まずケイシーは他の文章でもっと詳しく勉強して整理します!
再びhookに戻り、MemoizationのuseCallbackとuseMemoの使用について議論します.

useMemo

userMemoは、結果値10を繰り返し使用する必要がある場合、キャッシュ内のmemorization値は、結果値の再初期化と割り当てのたびに使用されることを示しています.
useMemoの基本skletonはuseEffectと似ている.ほとんどのフックはこのような形をしています.ただし、useMemoはreturn値memorizationを保存します.

useMemo(() => [
	return calculate()
}, [value])

useMemo example

コードを見て、なぜそれを使用するのかを理解してください.
簡単な計算機アプリを作りましょう!

const hardCal = (num) => {
	console.log("어려운 계산기")
    for (let i = 0; i < 1000000; i++){}
    return num + 10000
}

const normalCal = (num) => {
	console.log("쉬운 계산기")
    return num + 1
}

const App = () => {
	const [hardNumber, sethardNumber] = useState(1)
    const [easyNumber, setEasyNumber] = useState(1)
    
    const hardNum = hardCal(hardNumber)
    const eassyNum = easyCal(easyNumber)
	return (
    	<div>
        	<h3>어려운 계산기</h3>
			<input
           	  type="number"
              value={hardNum}
              onChange={(e) => setHardNumber(e.target.value)}
            />
            <span>10000 + {hardNum}</span>
            <h3>쉬운 계산기</h3>
			<input
           	  type="number"
              value={easyNum}
              onChange={(e) => setEasyNumber(e.target.value)}
            />
            <span>{hardNum}</span>
        </div>
    )
}

困難な計算機と単純な計算機を備えたアプリケーションが作成されました.(星のコードが素晴らしい)
難しい計算機で入力した数字に10000を加え、簡単な計算機に1を加えます.難しい計算機には不要な繰り返し文が多く、長い時間がかかるという欠点があります.簡単な計算機はありません.
ただし、単純計算機の値を変更しても、困難な計算機が実行され、すぐにビューに適用できません.
あ…?いいですが、当たり前です.
Relander Ringという名前の関数を呼び出します.関数を呼び出すと、関数に宣言された変数または関数が初期化されます.hardNumおよびeasyNumが初期化されるため、新しく登録されるたびにcal関数が呼び出される.
行きたいですが、これは間違っています.私が望んでいない値を初期化し続け、値を割り当てるのはメモリの無駄です.
したがって、特定の値が変化した場合にのみuserMemoを使用して値を初期化します.そうでなければmemorizationの値を使用します.
例を見てみましょう.

    // const hardNum = hardCal(hardNumber)
    
    const hardNum = useMemo(() => {
    	return hardCal(hardNum)
    }, [hardnum])
    

現在困難な計算機では、簡単な計算機を実行するときにhardCalは呼び出されません.

拡張

usemoを勉強するとこんな考えになります.前回のプロジェクトではログインしてuserIdにインポートして使用する必要があったのですが、決して毎回http呼び出しを行うのではなく、親コンポーネントがロードされるたびに固定されたuserIdをuserMemoとして受信し続ける方が良いと思います.
しかし、私はこれをどのように証明すればいいか分かりません.リフレクションをしながら修正していきましょう

useCallback

useCallbackはuseMemoのテクスチャに似ています.useMemoはmemorizationキャッシュ値を使用する関数で、素子が最初にロードされたり、値が変化したりしたときに値を再初期化し、割り当てます.
違いがあれば、関数を保存します.
構成部品が再ロードされると、構成部品の内部変数と関数が初期化されます.上記のように、すべての場合にすべての変数と関数を再初期化して割り当てるのは良い現象ではありません.場合によっては、その値を固有の値として保存する必要があります.特定の値を保存する場合はuseMemo、関数を保存する場合はuseCallbackを使用します.
useMemoの概念に似ていますが、コードの例を見てみましょう.

useCallback example

consoleは、userEffectを使用してsomeFunctionを変更する場合にのみ使用します.ログを実行するコードが構成されています.このコードは本当に正常に動作しますか?

const App = () => {
	const [number, setNumber] = useState(0)
    
    const someFunction = () => {
    	console.log(`someFunc: number: ${number}`)
    }
    
    useEffect(() => {
    	console.log("someFunction이 변경되었습니다.")
    }, [someFunction])
	return (
    	<div>
        	<input
              type="number"
              value={number}
              onChange={() => setNumber(e.target.value)}
            />
            <br/>
            <button onClick={someFunction}>Call someFunc</button>
        </div>
    )
}

私はむだに聞いたわけではない.だめだから.あら.そう言えますがjavascriptタイプのためです.関連する内容は他の宣伝によく記録されている.簡単に言えば、関数はオブジェクトタイプです.同じ関数でも、新しく割り当てられたメモリでは新しいメモリに参照されるので、異なる値です.
したがってuseEffectは実行されます.
私が望んだ結果は出なかった.だからuseEffectではなくuseCallbackを使用します.
あなたが望む方法で変えましょう.

const someFunction = useCallback(() => {
	console.log(`someFunc: number: ${number}`)
}, [])

これで、構成部品が最初に実行されると、useEffect内のコードが実行され、numberがupに設定されますが、コンソールは撮影されません.
ただし、ボタンをクリックするとnumber値は正しくロードされません.someFunctionを注記するときは、そのときのnumber値が0なので、次回呼び出し関数でも0が出力されます.
一つ忘れたことがある.dependencyが入力されていません.numberを入力すると、number値が変化するたびに関数が再定義されてコメントされます.

const someFunction = useCallback(() => {
	console.log(`someFunc: number: ${number}`)
}, [number])

注意事項！

useCallbackとuseMemoをエンコードする場合は、親コンポーネントのレンダリングに常に注意してください.この構成部品のレンダリングのみに注目すると、どこで起こるか分からないことが多くなる可能性があります.したがって、親構成部品の再レンダリングを検討する場合は、反応構造を作成する必要があります.

n/a.結論

今、私はプロジェクトをしている間に感じた糞コードがどのように修正されたのかを意識したようです.useEffectの稼働を阻止できなかったので、すぐにやってみなければなりません!