剛接觸 useMemo 時(shí)，我以為它的核心作用就是用來(lái)做緩存。很多開發(fā)者都有類似誤解：認(rèn)為 useMemo 主要是為了性能優(yōu)化，以避免組件中不必要的重新計(jì)算。然而，經(jīng)歷了五年的 React 開發(fā)，我才意識(shí)到 useMemo 的真正價(jià)值不只是性能——更關(guān)鍵的是，它能保持?jǐn)?shù)據(jù)引用的穩(wěn)定性，讓組件行為更加可預(yù)期。

為什么 useMemo 不僅僅是緩存

普遍的誤解是：useMemo 是個(gè)用來(lái)“記住”某些計(jì)算結(jié)果的魔法，使得相同輸入不會(huì)重復(fù)計(jì)算。雖然這種理解在技術(shù)層面沒(méi)錯(cuò)，但用 useMemo 的更大收益在于確保引用（Reference）的穩(wěn)定性。這在需要將某些數(shù)據(jù)傳遞給自定義 Hook 或作為依賴項(xiàng)使用時(shí)尤為重要。

設(shè)想一個(gè)場(chǎng)景：組件需要計(jì)算出某個(gè)對(duì)象，然后將這個(gè)對(duì)象當(dāng)作參數(shù)傳給自定義 Hook。如果這個(gè)對(duì)象在每次渲染時(shí)都新建一個(gè)實(shí)例，即使內(nèi)容相同，引用也不同，從而導(dǎo)致 Hook 誤以為數(shù)據(jù)每次都變了。這可能引發(fā)不必要的副作用或反復(fù)渲染。

我的經(jīng)驗(yàn)教訓(xùn)：用對(duì) useMemo

有一次，我在實(shí)現(xiàn)一個(gè)自定義計(jì)算 Hook 時(shí)遇到了類似問(wèn)題。我在組件中內(nèi)聯(lián)構(gòu)建了一個(gè)對(duì)象，把已有的 bookingFields 和 values 合并后傳給 useCalculations：

const existingFields = {
    ...bookingFields,
    ...values,
};
const { calculations } = useCalculations(existingFields);

表面上看，這段代碼似乎沒(méi)啥問(wèn)題。但不久后，我發(fā)現(xiàn)組件陷入了不停的重新渲染循環(huán)，計(jì)算結(jié)果也一直不穩(wěn)定。問(wèn)題的根源在于：雖然 existingFields 的內(nèi)容沒(méi)變，但每次渲染都會(huì)生成一個(gè)新的對(duì)象引用。React 在比較依賴項(xiàng)時(shí)是根據(jù)引用來(lái)判斷變化的，所以自定義 Hook 認(rèn)為數(shù)據(jù)“每次都更新了”。

拯救者 useMemo 登場(chǎng)

為了解決這個(gè)問(wèn)題，我用 useMemo 將這個(gè)對(duì)象的創(chuàng)建過(guò)程包裹起來(lái)，讓它只有在依賴數(shù)據(jù)（bookingFields 和 values）改變時(shí)才重新生成對(duì)象：

const existingFields = useMemo(
    () => ({
        ...bookingFields,
        ...values,
    }),
    [bookingFields, values]
);

改寫之后，引用穩(wěn)定下來(lái)，我的自定義 Hook 終于不再頻繁觸發(fā)重復(fù)計(jì)算，也不再讓組件重復(fù)渲染。一切變得井然有序。??

何時(shí)使用 useMemo

• 避免不必要的重渲染：當(dāng)需要將派生出來(lái)的對(duì)象或數(shù)組作為依賴項(xiàng)傳給自定義 Hook 或子組件時(shí)，可以用 useMemo 穩(wěn)定它的引用，從而避免組件不斷重新渲染。
  示例：有個(gè)子組件要接收一個(gè)數(shù)組作為 prop，用 useMemo 確保這個(gè)數(shù)組只有在源數(shù)據(jù)改變時(shí)才更新，而不是在每次父組件渲染時(shí)都生成新數(shù)組。
• 穩(wěn)定依賴：在 useEffect 或 useCallback 中使用依賴項(xiàng)時(shí)，如果這些依賴項(xiàng)是對(duì)象或函數(shù)引用，useMemo 能確保在依賴項(xiàng)未實(shí)際變動(dòng)時(shí)不觸發(fā)不必要的副作用。
• 復(fù)雜計(jì)算：對(duì)于計(jì)算量較大的數(shù)據(jù)處理，useMemo 可以確保只有在相關(guān)依賴變動(dòng)時(shí)才重新計(jì)算，減少性能浪費(fèi)。

何時(shí)不該使用 useMemo

如果你的計(jì)算非常簡(jiǎn)單，或不依賴于外部動(dòng)態(tài)數(shù)據(jù)，那么 useMemo 可能只是增加代碼的復(fù)雜性，而無(wú)實(shí)質(zhì)收益。不必要的 memo 化會(huì)使代碼難以理解，并且可能沒(méi)有明顯的性能提升。

核心收獲

useMemo 的真正價(jià)值在于保持引用的穩(wěn)定性，進(jìn)而保證組件行為的可預(yù)測(cè)性。當(dāng)我們減少了無(wú)意義的重復(fù)計(jì)算和渲染，性能自然得以提升。但要記住，不要一上來(lái)就為了“優(yōu)化”而過(guò)度使用 useMemo。清晰的思路是：先確保組件的行為正確、可控，然后在需要時(shí)再考慮用 useMemo 來(lái)避免不必要的變化。

下次你準(zhǔn)備用 useMemo 時(shí)，不妨問(wèn)問(wèn)自己：是因?yàn)樾枰€(wěn)定數(shù)據(jù)引用以避免無(wú)謂的重復(fù)工作，還是只是在做無(wú)意義的“過(guò)早優(yōu)化”？只有真正理解它的用武之地，才能讓 useMemo 在你的 React 項(xiàng)目中發(fā)揮最大價(jià)值。