提升 React 效能：useCallback 與 useMemo Hooks

React 的 useCallback 和 useMemo 掛鉤對於優化應用程式的效能至關重要。了解何時以及如何使用它們可以使您避免不必要的重新渲染並確保您的應用程式順利運行。在本文中，我們將深入研究有效使用 useCallback 和 useMemo 的實際範例。

何時使用 useCallback

useCallback 掛鉤傳回回呼函數的記憶版本，這表示它僅在其依賴項之一發生變更時重新建立該函數。當將函數作為 props 傳遞給子元件以防止它們不必要地重新渲染時，這特別有用。

即時範例：防止不必要的重新渲染

假設您有一個將函數傳遞給子元件的父元件。如果沒有 useCallback，每次父元件渲染時，子元件都會重新渲染，即使函數邏輯沒有改變。

import React, { useState, useCallback } from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const [count, setCount] = useState(0);

  // Using useCallback to memoize the function
  const handleIncrement = useCallback(() => {
    setCount(count   1);
  }, [count]);

  return (
    

      
Count: {count}
      
  );
};

export default ParentComponent;

在上面的例子中，handleIncrement是透過useCallback來記憶的。 ChildComponent 僅在計數變更時才會重新渲染，防止不必要的重新渲染並提高效能。

何時使用 useMemo

useMemo 鉤子用於記憶函數的結果，僅當其依賴項之一發生變更時才重新計算快取的結果。在函數執行昂貴計算的情況下，它對於最佳化效能很有用。

即時範例：優化昂貴的計算

假設您有一個元件執行計算量大的操作，例如過濾大列表。

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

const ExpensiveComponent = ({ items }) => {
  const [filter, setFilter] = useState('');

  // Using useMemo to optimize expensive filtering
  const filteredItems = useMemo(() => {
    console.log('Filtering items...');
    return items.filter(item => item.includes(filter));
  }, [items, filter]);

  return (
    

       setFilter(e.target.value)}
        placeholder="Filter items"
      />
      

        {filteredItems.map((item, index) => (
          
{item}
        ))}
      
  );
};

export default ExpensiveComponent;

本例中使用useMemo來快取items陣列的過濾結果。這樣，昂貴的過濾操作僅在項目或過濾器發生變化時才重新計算，避免了不必要的計算。

useCallback 和 useMemo 使用指南

• 將函數傳遞給子元件時使用 useCallback 以避免不必要的重新渲染。
• 使用 useMemo 進行昂貴的計算，不需要在每次渲染時重新計算。
• 避免過度使用它們。 記憶化會增加複雜性，有時會使程式碼更難閱讀。僅當您發現效能問題時才使用它們。
• 記得依賴關係數組。 始終準確地指定依賴關係；否則，您可能會遇到錯誤或意外行為。

結論

React 的 useCallback 和 useMemo 鉤子是透過避免不必要的重新渲染和昂貴的計算來優化組件性能的強大工具。透過仔細應用這些鉤子，您可以確保您的 React 應用程式高效運行。