理解 `useMemo` 和 `useCallback`：綜合指南

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, dependency)

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。

跳過組件的重新渲染

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

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

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

export default function TodoList({ todos, tab, theme }) {
  // ...
  return (
    <div className={theme}>
      <List items={visibleTodos} />
    </div>
  );
}

import { memo } from 'react';

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

結論

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

以上是理解 `useMemo` 和 `useCallback`：綜合指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！