使用 React 的 useMemo Hook 優化效能：記憶昂貴的計算

React 中的 useMemo Hook

useMemo 鉤子是一個內建的 React 鉤子，它透過記憶昂貴的計算來幫助優化應用程式的效能。它確保某些計算僅在其依賴項發生變化時重新執行，而不是在每次渲染時重新執行。這對於防止元件重新渲染時不必要的值重新計算特別有用。

---

什麼是useMemo？

useMemo 用於記憶昂貴的函數呼叫的結果，並僅在其依賴項之一發生變更時重新計算它。這可以透過避免每次渲染時昂貴的重新計算來提高效能。

---

useMemo 的語法

const memoizedValue = useMemo(() => expensiveFunction(param1, param2), [param1, param2]);

• expenseFunction(param1, param2)：執行昂貴計算的函數。
• memoizedValue：expenseFunction的結果，只有當依賴關係改變時才會重新計算。
• [param1, param2]：依賴數組。只有當這些值之一發生變化時，才會重新計算儲存的值。

---

useMemo 的工作原理

1. Memoization：useMemo 鉤子儲存計算結果，如果自上次渲染以來依賴項沒有更改，則傳回儲存的結果。
2. 重新計算：如果任何依賴項發生變化，將重新執行計算，並傳回新的結果。

---

使用範例Memo Hook

讓我們考慮一個計算速度較慢的簡單範例：

import React, { useState, useMemo } from 'react';

const ExpensiveComponent = () => {
  const [count, setCount] = useState(0);
  const [toggle, setToggle] = useState(false);

  const calculateExpensiveValue = (num) => {
    console.log('Calculating expensive value...');
    return num * 2;
  };

  // Memoizing the expensive function result
  const memoizedValue = useMemo(() => calculateExpensiveValue(count), [count]);

  return (
    <div>
      <h2>Expensive Calculation: {memoizedValue}</h2>
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
      <button onClick={() => setToggle(!toggle)}>Toggle</button>
    </div>
  );
};

export default ExpensiveComponent;

• 說明：

  • useMemo 用於記憶calculateExpectiveValue(count)的結果。
  • calculateExpectiveValue 函數只會在計數變更時才會重新執行。當切換狀態變更時，不會重新計算記憶值，因為切換不是依賴項陣列的一部分。

• 為什麼在這裡使用useMemo？

  • 如果沒有 useMemo，即使切換狀態改變且不會影響計算，每次渲染都會呼叫昂貴的函數calculateExppressiveValue。使用 useMemo 可確保僅在必要時執行昂貴的計算。

---

何時使用 useMemo

您應該在以下情況下使用 useMemo：

1. 昂貴的計算：當您有運行成本高昂的函數或操作，並且您希望避免重新計算它們，除非絕對必要（例如，對大型數組進行排序或複雜的計算）。

2. 避免不必要的重新渲染：記住傳遞給子元件的值可以防止子元件不必要的重新渲染。如果記憶的值沒有改變，React 可以跳過渲染子元件。

3. 最佳化效能：如果某個特定邏輯涉及僅依賴某些props 或states 的計算，useMemo 可以確保函數僅在其依賴項發生變化時運行，從而最佳化效能。

---

useMemo 的常見用例

1. 昂貴的計算

例如，假設您正在渲染一個需要排序或過濾的項目列表，而此操作的成本很高。

const memoizedValue = useMemo(() => expensiveFunction(param1, param2), [param1, param2]);

• 說明：這裡，過濾操作只會在資料數組發生變化時運行，防止其他狀態值變更時不必要的重新渲染或計算。

1. 記憶子組件道具

如果您有一個子元件接受由昂貴的計算產生的 prop，您可以記住計算並將結果作為 prop 傳遞。

import React, { useState, useMemo } from 'react';

const ExpensiveComponent = () => {
  const [count, setCount] = useState(0);
  const [toggle, setToggle] = useState(false);

  const calculateExpensiveValue = (num) => {
    console.log('Calculating expensive value...');
    return num * 2;
  };

  // Memoizing the expensive function result
  const memoizedValue = useMemo(() => calculateExpensiveValue(count), [count]);

  return (
    <div>
      <h2>Expensive Calculation: {memoizedValue}</h2>
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
      <button onClick={() => setToggle(!toggle)}>Toggle</button>
    </div>
  );
};

export default ExpensiveComponent;

1. 防止在不必要的渲染上重新計算

如果您的元件有多個狀態值，但只有一個狀態值會影響昂貴的計算，您可以使用 useMemo 來避免重新計算該值，除非其相關狀態已變更。

---

useMemo 和 useCallback 之間的區別

雖然 useMemo 和 useCallback 都用於記憶，但它們的目的不同：

• useMemo 用於記憶昂貴的計算或函數呼叫的結果。
• useCallback 用於記憶實際函數本身，以防止在每次渲染時重新建立該函數。

鉤子 目的 用法範例 標題>

Hook	Purpose	Example Usage
useMemo	Memoizes the result of a function call or calculation	Memoizing a computed value
useCallback	Memoizes the function itself	Preventing the creation of a new function on each render

useMemo 記住函數呼叫或計算的結果 儲存計算值 useCallback 記憶函數本身 防止在每次渲染時建立新函數 表>

---

性能考慮因素

• 避免過度使用 useMemo：雖然 useMemo 可以優化效能，但它本身也有一定的成本，因為 React 需要追蹤依賴項和記憶值。在某些情況下，使用 useMemo 可能不會帶來明顯的效能提升，特別是對於簡單的計算。
• 基準測試：在使用 useMemo 之前和之後對組件進行基準測試非常重要，以確保它確實提高了特定情況下的性能。

---

useMemo 排序範例

這是使用 useMemo 來記憶排序清單的範例：

const memoizedValue = useMemo(() => expensiveFunction(param1, param2), [param1, param2]);

• 說明：
  • 在此範例中，sortedItems 使用 useMemo 進行記憶。只有當 items 陣列或 sortOrder 狀態發生變更時，才會重新計算排序運算。
  • 如果沒有 useMemo，即使 items 和 sortOrder 都沒有改變，排序也會在每次渲染時發生。

---

使用總結Memo Hook

• useMemo 用於記憶昂貴的計算，並僅在依賴項發生變化時重新計算它們。
• 它可以透過避免不必要的重新計算來顯著提高效能。
• useMemo 應該用於計算或昂貴的計算，並且只應在必要時重新計算。

---

結論

useMemo 鉤子是最佳化 React 應用程式效能的重要工具。它確保僅在必要時執行昂貴的計算，從而使您的組件更加高效。但是，應該謹慎使用它，因為過度使用可能會導致不必要的複雜性和潛在的性能下降。

---

以上是使用 React 的 useMemo Hook 優化效能：記憶昂貴的計算的詳細內容。更多資訊請關注PHP中文網其他相關文章！