背景

在 React 中，useMemo 和 useCallback 這兩個(gè) hook 是我們優(yōu)化應(yīng)用性能的有力工具。它們會(huì)返回 memoized 版本的值或函數(shù)，只在依賴項(xiàng)發(fā)生變化時(shí)才進(jìn)行重新計(jì)算或定義。

Hook 介紹

useMemo

useMemo 的作用是返回一個(gè) memoized 值，它接受兩個(gè)參數(shù)：一個(gè)函數(shù)和一個(gè)依賴數(shù)組。只有當(dāng)依賴項(xiàng)中的一個(gè)值變化，才會(huì)重新計(jì)算并返回新的 memoized 值。

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

上述代碼例子中，useMemo 返回了一個(gè) memoized 版本的 computeExpensiveValue(a, b) 函數(shù)結(jié)果，a 或 b 改變時(shí)，才會(huì)重新計(jì)算。

舉個(gè)例子

假設(shè)?computeExpensiveValue?是一個(gè)需要大量計(jì)算資源的函數(shù)，比如它需要計(jì)算斐波那契數(shù)列的第 n 項(xiàng)。在這種情況下，每次組件渲染時(shí)重新計(jì)算顯然是一種資源浪費(fèi)。通過使用?useMemo，我們可以在?a?或者?b?變化時(shí)，才重新進(jìn)行這種耗時(shí)的計(jì)算。

useCallback

useCallback 與 useMemo 用法類似，不過它返回的是一個(gè) memoized 函數(shù)。這在我們需要將函數(shù)作為 prop 傳遞給子組件時(shí)非常有用，避免由于父組件重渲染導(dǎo)致不必要的函數(shù)重新創(chuàng)建。

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

在此代碼例子中，useCallback 返回的是一個(gè) memoized 版本的函數(shù) () => doSomething(a, b)，只有當(dāng) a 或 b 發(fā)生變化時(shí)，才會(huì)重新創(chuàng)建新的函數(shù)定義。

舉個(gè)例子

假設(shè)我們?cè)谝粋€(gè)父組件中定義了一個(gè)事件處理器，這個(gè)處理器依賴于父組件的一些 prop。如果我們每次在渲染父組件時(shí)都創(chuàng)建新的事件處理器，那么即使 prop 沒有變化，子組件還是會(huì)進(jìn)行不必要的重渲染。

為了解決這個(gè)問題，我們可以使用?useCallback?來 memoize 事件處理器，只有當(dāng)依賴的 prop 變化時(shí)，才重新創(chuàng)建事件處理器。

建議

雖然 useMemo 和 useCallback 都可用于提升性能，但我們需要謹(jǐn)慎選擇使用場(chǎng)景。過度使用可能導(dǎo)致更多的計(jì)算開銷。例如在計(jì)算新的函數(shù)或值的過程本身不需要很多計(jì)算資源，但由于頻繁的依賴項(xiàng)檢查和新值的計(jì)算，可能會(huì)導(dǎo)致性能反而下降。

總結(jié)

useMemo 和 useCallback 是 React 提供的強(qiáng)有力的性能優(yōu)化工具。掌握正確的使用場(chǎng)景和方式，可以有效地提升你的應(yīng)用性能，而避免不必要的計(jì)算開銷。