介紹

React 提供了廣泛的鉤子來幫助我們有效地建立動態應用程式。在這些鉤子中，useMemo和useCallback是提高元件效能的重要工具。儘管兩者都有相似的目的——防止不必要的重新計算或函數重新創建——但它們適用於不同的場景。

在本文中，我們將探討 useMemo 和 useCallback 之間的差異、它們為何有用以及如何在專案中有效地使用它們。

1. 什麼是 useMemo？

useMemo 鉤子用於記憶昂貴計算的結果，並且僅在其依賴項發生變化時重新計算它。它可以幫助您避免不必要的重新計算值，這對於計算成本較高的操作特別有用。

• 句法

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

• 用法範例

import React, { useMemo } from 'react';

function Example({ items }) {
  const total = useMemo(() => {
    return items.reduce((acc, item) => acc   item.price, 0);
  }, [items]);

  return 
Total Price: {total}
;
}

這裡，useMemo只會在專案發生變化時重新計算總計，如果專案是靜態的或很少更新，則可以節省資源。

1.什麼是useCallback？

useCallback鉤子用於記憶函數。與 useMemo 一樣，它僅在依賴項發生變化時重新計算函數。 useCallback 對於防止在每次渲染時重新建立函數特別有幫助，這在將回調傳遞給依賴於引用相等性的最佳化子元件時可能有利於效能。

• 句法

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

• 用法範例

import React, { useCallback } from 'react';

function ParentComponent() {
  const handleClick = useCallback(() => {
    console.log('Button clicked!');
  }, []);

  return ;
}

這裡，useCallback確保handleClick保持相同的函數實例，除非依賴項發生變化，有助於防止ChildComponent中不必要的重新渲染。

3.比較 useMemo 和 useCallback

要點

• 當您想要快取計算的結果時，useMemo很有用。
• 當您想要快取一個函數以避免重新建立它時，useCallback很有用。

4.何時使用每個鉤子？

了解何時使用 useMemo 和 useCallback 歸根結底是了解組件的性能要求以及記憶是否會產生顯著差異。

使用 useMemo:

• 當您進行計算量大且不需要在每次渲染上重新運行時。
• 記憶派生資料有助於減少計算，例如聚合大型清單中的資料或執行數學運算。

使用useCallback:

• 當您將函數作為 prop 傳遞給依賴於引用相等性的子元件。
• 防止不必要地重新建立函數，特別是在高頻組件中。

5.常見錯誤與最佳實務

• 過早使用 useMemo 或 useCallback

不要過度使用這些鉤子。記憶化會增加複雜性，如果不需要，它會增加記憶體開銷，從而降低效能。

• 忽略依賴關係

確保正確列出所有相依性。如果依賴項發生變更但未包含在陣列中，則快取的結果可能會過時，從而導致錯誤。

• 濫用 useMemo 和 useCallback

記住：useMemo 快取值，useCallback 快取函數。使用錯誤的鉤子可能會導致意外的行為和錯誤。

• 避免重新記憶陷阱

記憶的函數和值僅在依賴項發生變化時才會更新。為了防止不必要的重新渲染，請確保相依性陣列僅包含真正影響函數結果或邏輯的變數。

結論

useMemo 和 useCallback 都是優化 React 應用程式的強大工具。透過快取 計算與useMemo和函數與useCallback，您可以提高效能 ，特別是在計算量大或元件渲染頻繁的應用程式中。

雖然這些鉤子很有幫助，但明智地使用它們至關重要。透過策略性地應用 useMemo 和 useCallback，您可以確保您的 React 應用程式保持快速和回應能力。