useCallback 和 useMemo

在hooks誕生之前，如果組件包含內(nèi)部 state咪啡，我們都是基于 class 的形式來(lái)創(chuàng)建組件暮屡。

在react中撤摸，性能優(yōu)化主要是針對(duì)以下兩個(gè)場(chǎng)景：

調(diào)用 setState，就會(huì)觸發(fā)組件的重新渲染钥飞，無(wú)論前后 state 是否相同
父組件更新衫嵌，子組件也會(huì)自動(dòng)更新

在類(lèi)組件的開(kāi)發(fā)模式下，我們通常的解決方案是：使用 immutable 進(jìn)行比較楔绞，在不相等的時(shí)候調(diào)用 setState，在 shouldComponentUpdate 中判斷前后的 props 和 state桦锄，如果沒(méi)有變化，則返回 false 來(lái)阻止更新察纯。

在 hooks 出來(lái)之后针肥，函數(shù)組件中沒(méi)有 shouldComponentUpdate 生命周期，我們無(wú)法通過(guò)判斷前后狀態(tài)來(lái)決定是否更新慰枕。useEffect 不再區(qū)分 mount update 兩個(gè)狀態(tài)，這意味著函數(shù)組件的每一次調(diào)用都會(huì)執(zhí)行其內(nèi)部的所有邏輯博肋，那么會(huì)帶來(lái)較大的性能損耗蜂厅。

但是hooks提供了 useCallback 和 useMemo兩個(gè)hook方便進(jìn)行上述場(chǎng)景的優(yōu)化匪凡。

useCallback

先看看useCallback掘猿，其實(shí)就是返回一個(gè)函數(shù)，只有在依賴(lài)項(xiàng)發(fā)生變化的時(shí)候才會(huì)更新（返回一個(gè)新的函數(shù)）衬衬。

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

把內(nèi)聯(lián)回調(diào)函數(shù)及依賴(lài)項(xiàng)數(shù)組作為參數(shù)傳入 useCallback改橘，它將返回該回調(diào)函數(shù)的 memoized 版本，該回調(diào)函數(shù)僅在某個(gè)依賴(lài)項(xiàng)改變時(shí)才會(huì)更新飞主。當(dāng)你把回調(diào)函數(shù)傳遞給經(jīng)過(guò)優(yōu)化的并使用引用相等性去避免非必要渲染（例如 shouldComponentUpdate）的子組件時(shí)高诺，它將非常有用碾篡。

useMemo

把“創(chuàng)建”函數(shù)和依賴(lài)項(xiàng)數(shù)組作為參數(shù)傳入 useMemo，它僅會(huì)在某個(gè)依賴(lài)項(xiàng)改變時(shí)才重新計(jì)算 memoized 值耽梅。這種優(yōu)化有助于避免在每次渲染時(shí)都進(jìn)行高開(kāi)銷(xiāo)的計(jì)算胖烛。

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

記住，傳入 useMemo 的函數(shù)會(huì)在渲染期間執(zhí)行众旗。請(qǐng)不要在這個(gè)函數(shù)內(nèi)部執(zhí)行與渲染無(wú)關(guān)的操作趟畏，諸如副作用這類(lèi)的操作屬于 useEffect 的適用范疇，而不是 useMemo赋秀。

如果沒(méi)有提供依賴(lài)項(xiàng)數(shù)組，useMemo 在每次渲染時(shí)都會(huì)計(jì)算新的值猎莲。

你可以把 useMemo 作為性能優(yōu)化的手段，但不要把它當(dāng)成語(yǔ)義上的保證樟遣。將來(lái)身笤，React 可能會(huì)選擇“遺忘”以前的一些 memoized 值，并在下次渲染時(shí)重新計(jì)算它們液荸，比如為離屏組件釋放內(nèi)存。先編寫(xiě)在沒(méi)有 useMemo 的情況下也可以執(zhí)行的代碼 —— 之后再在你的代碼中添加 useMemo涤久，以達(dá)到優(yōu)化性能的目的。