useMemo 和 useCallback 是兩個強大的 React hook，它們在防止不必要的重新渲染方面發揮著至關重要的作用，從而優化組件性能。它們是開發人員創建響應迅速且高效的 React 應用程式的必備工具。

在本指南中，我們將深入解釋 useMemo 和 useCallback 的相似之處以及彼此之間的差異。我們將了解如何實現它們，何時使用每一個。

為什麼要使用 useMemo 或 useCallback

通常在 React 中，大多數計算都很快，但有時您需要對非常大的陣列進行計算，或者進行一些不需要在每次重新渲染時執行的昂貴計算。

useMemo 和 useCallback 鉤子可以透過快取重新渲染之間那些昂貴的計算來幫助解決這個問題。

什麼是 useMemo 以及如何使用它。

useMemo 是 React hook，它快取重新渲染之間的計算結果，它需要兩個參數：

• CalculatedValue：計算要快取的值的函數。該函數不應接受任何參數，並且應該是純函數，並傳回任何類型的值。如果依賴關係沒有改變，React將傳回相同的計算結果，否則它將計算一個​​新的結果並快取它。
• 依賴項：CalculatedValue 內的所有反應值所引用的列表，來自狀態變數常數和函數呼叫。 React 將嘗試使用 Object.it 比較將每個反應值與其先前的值進行比較。

useMemo 用法

要快取重新渲染之間的運算，請將其包裝在元件頂層的 useMemo 掛鉤中。

useMemo(fn，依賴項)

const App = () => {
  const useMemo(() => {
    filterTodo(todos, tab)
  }, [todos, tab])
  return(...)
}

export default App

注意useMemo的第一個參數是一個沒有參數的函數。

第一次React會計算useMemo第一個參數的結果值，然後記住第二個參數，也就是依賴項清單。 React 會快取重新渲染之間的計算結果，並且僅當依賴項值之一變更時才重新計算結果。

什麼是 useCallback 以及如何使用它。

useCallback 鉤子與 useMemo 鉤子相同，唯一的區別是該鉤子將緩存函數（useCallback 的第一個參數）而不計算值。此函數也可以接受與 useMemo.

使用useCallback需要傳遞參數：

• 需要快取的函數定義。
• 依賴項清單

const cachedFn = useCallback(fn, 依賴項)

import { useCallback } from 'react';

export default function ProductPage({ productId }) {
  const handleSubmit = useCallback((orderDetails) => {
    post('/product/'   productId   '/buy', {
      referrer,
      orderDetails,
    });
  }, [productId, referrer]);

何時使用 useMemo 而不是 useCallback

如果您主要關心最佳化計算結果，請使用 useMemo。
如果您主要關心的是防止由於函數更改而導致不必要的重新渲染，請使用 useCallback.

跳過組件的重新渲染

有時您會有一個需要重新渲染的父元件，這也會導致子元件的重新渲染。可以使用 memo 快取組件。

假設我們有一個主題狀態的 Todolist 元件，以及一個作為子元件的 List 元件。每當主題狀態變更時，清單元件都會重新渲染，這是不必要的。若要解決此問題，請使用備忘錄。

我們用 memo 包裝 List 的功能組件。

export default function TodoList({ todos, tab, theme }) {
  // ...
  return (
    

      
    
  );
}

import { memo } from 'react';

const List = memo(function List({ items }) {
  // ...
});

結論

在這篇綜合指南中，我們了解了 useMemo 和 useCallback 鉤子，如何使用它們，何時使用它們，並解釋了它們對於優化 React 應用程式效能的好處。