React?中hooks之?React.memo?和?useMemo用法示例總結

更新時間：2025年01月23日 14:22:34 作者：傻小胖

React.memo是一個高階組件,用于優(yōu)化函數(shù)組件的性能,通過記憶組件渲染結果來避免不必要的重新渲染,合理使用React.memo和useMemo可以顯著提升React應用的性能,本文介紹React?中hooks之?React.memo?和?useMemo用法總結,感興趣的朋友一起看看吧

1. React.memo 基礎

React.memo 是一個高階組件（HOC），用于優(yōu)化函數(shù)組件的性能，通過記憶組件渲染結果來避免不必要的重新渲染。

1.1 基本用法

const MemoizedComponent = React.memo(function MyComponent(props) {
  /* 渲染邏輯 */
});

只有props發(fā)生變化才會重新渲染MemoizedComponent

1.2 帶有比較函數(shù)的用法

const MemoizedComponent = React.memo(MyComponent, (prevProps, nextProps) => {
  // 返回 true 表示不需要重新渲染
  // 返回 false 表示需要重新渲染
  return prevProps.id === nextProps.id;
});

2. React.memo 使用場景

2.1 純展示組件

const ExpensiveComponent = React.memo(function ExpensiveComponent({ data }) {
  // 復雜的渲染邏輯
  return (
    <div>
      {data.map(item => (
        <div key={item.id}>
          <h3>{item.title}</h3>
          <p>{item.description}</p>
        </div>
      ))}
    </div>
  );
});
// 父組件
function ParentComponent() {
  const [count, setCount] = useState(0);
  const data = [/* 大量數(shù)據(jù) */];
  return (
    <div>
      <button onClick={() => setCount(c => c + 1)}>
        Count: {count}
      </button>
      <ExpensiveComponent data={data} />
    </div>
  );
}

2.2 列表項組件

const ListItem = React.memo(function ListItem({ item, onItemClick }) {
  console.log(`Rendering item ${item.id}`);
  return (
    <li onClick={() => onItemClick(item.id)}>
      {item.name}
    </li>
  );
});
function List({ items }) {
  const [selectedId, setSelectedId] = useState(null);
  // 使用 useCallback 來記憶回調(diào)函數(shù)
  const handleItemClick = useCallback((id) => {
    setSelectedId(id);
  }, []);
  return (
    <ul>
      {items.map(item => (
        <ListItem
          key={item.id}
          item={item}
          onItemClick={handleItemClick}
        />
      ))}
    </ul>
  );
}

3. useMemo 基礎

useMemo 是一個 Hook，用于記憶計算結果，避免在每次渲染時重復進行昂貴的計算。

3.1 基本用法

const memoizedValue = useMemo(() => {
  // 進行計算并返回結果
  return computeExpensiveValue(a, b);
}, [a, b]); // 依賴項數(shù)組，空數(shù)組時只有初始化的時候執(zhí)行，沒有依賴參數(shù)項state每次變化都會引起重新執(zhí)行，有依賴數(shù)組室，依賴數(shù)據(jù)發(fā)生變化才會觸發(fā)重新執(zhí)行

4. useMemo 使用場景

4.1 昂貴的計算

function DataAnalytics({ data }) {
  const processedData = useMemo(() => {
    // 假設這是一個復雜的數(shù)據(jù)處理函數(shù)
    return data.map(item => ({
      ...item,
      processed: expensiveOperation(item)
    }));
  }, [data]); // 只在 data 改變時重新計算
  return (
    <div>
      {processedData.map(item => (
        <div key={item.id}>{item.processed}</div>
      ))}
    </div>
  );
}

4.2 避免子組件不必要的重新渲染

function ParentComponent({ items }) {
  // 記憶對象或數(shù)組類型的 props
  const memoizedValue = useMemo(() => ({
    data: items,
    config: {
      sortBy: 'name',
      filterBy: 'active'
    }
  }), [items]);
  return <ChildComponent options={memoizedValue} />;
}

4.3 復雜對象的派生狀態(tài)

function UserDashboard({ user, transactions }) {
  // 計算用戶統(tǒng)計信息
  const userStats = useMemo(() => {
    return {
      totalSpent: transactions.reduce((sum, t) => sum + t.amount, 0),
      averageSpent: transactions.length
        ? transactions.reduce((sum, t) => sum + t.amount, 0) / transactions.length
        : 0,
      mostFrequentCategory: calculateMostFrequentCategory(transactions)
    };
  }, [transactions]);
  return (
    <div>
      <UserInfo user={user} />
      <UserStatistics stats={userStats} />
    </div>
  );
}

5. 性能優(yōu)化最佳實踐

5.1 合理使用 React.memo

// ? 好的使用場景：純組件，props 很少改變
const PureComponent = React.memo(function PureComponent({ data }) {
  return <div>{/* 渲染邏輯 */}</div>;
});
// ? 不好的使用場景：props 經(jīng)常變化
const FrequentlyChangingComponent = React.memo(function FrequentlyChangingComponent({ date }) {
  return <div>{date.toLocaleTimeString()}</div>;
});

5.2 合理使用 useMemo

// ? 好的使用場景：計算開銷大
const expensiveValue = useMemo(() => {
  return someExpensiveOperation(props.data);
}, [props.data]);
// ? 不好的使用場景：計算開銷小
const simpleValue = useMemo(() => {
  return props.value + 1;
}, [props.value]); // 這種情況直接計算即可

5.3 配合 useCallback 使用

function SearchComponent({ onSearch }) {
  const [query, setQuery] = useState('');
  // 記憶回調(diào)函數(shù)
  const handleSearch = useCallback(() => {
    onSearch(query);
  }, [query, onSearch]);
  // 記憶計算結果
  const searchResults = useMemo(() => {
    return performExpensiveSearch(query);
  }, [query]);
  return (
    <div>
      <input
        value={query}
        onChange={e => setQuery(e.target.value)}
      />
      <button onClick={handleSearch}>搜索</button>
      <ResultsList results={searchResults} />
    </div>
  );
}
// 使用 React.memo 優(yōu)化 ResultsList
const ResultsList = React.memo(function ResultsList({ results }) {
  return (
    <ul>
      {results.map(result => (
        <li key={result.id}>{result.title}</li>
      ))}
    </ul>
  );
});

6. 注意事項

不要過度優(yōu)化

只在真正需要的地方使用 memo 和 useMemo
性能測量驗證優(yōu)化效果

依賴項的正確使用

確保依賴項數(shù)組包含所有需要的值
避免依賴項過多導致優(yōu)化失效

避免在循環(huán)中使用 useMemo

// ? 錯誤示例
{items.map(item => {
  const memoizedValue = useMemo(() => compute(item), [item]);
  return <div>{memoizedValue}</div>;
})}

考慮內(nèi)存使用

memo 和 useMemo 會占用額外的內(nèi)存
在內(nèi)存受限的環(huán)境中要謹慎使用

7. 性能優(yōu)化決策流程

首先評估是否真的需要優(yōu)化
使用 React DevTools Profiler 識別性能問題
選擇合適的優(yōu)化策略：
- 組件重新渲染優(yōu)化：使用 React.memo
- 計算結果優(yōu)化：使用 useMemo
- 回調(diào)函數(shù)優(yōu)化：使用 useCallback
測試優(yōu)化效果
持續(xù)監(jiān)控性能

通過合理使用 React.memo 和 useMemo，我們可以顯著提升 React 應用的性能。但記住，過度優(yōu)化可能會適得其反，應該在實際需要時才進行優(yōu)化。

到此這篇關于React 中hooks之 React.memo 和 useMemo用法總結的文章就介紹到這了,更多相關React React.memo 和 useMemo內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

React-Native之定時器Timer的實現(xiàn)代碼
本篇文章主要介紹了React-Native之定時器Timer的實現(xiàn)代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-10-10
如何在React中直接使用Redux
這篇文章主要介紹了如何在React中直接使用Redux,目前redux在react中使用是最多的，所以我們需要將之前編寫的redux代碼，融入到react當中去，本文給大家詳細講解，需要的朋友可以參考下
2022-11-11
react數(shù)據(jù)管理中的setState與Props詳解
setState?是?React?中用于更新組件狀態(tài)（state）的方法,本文給大家介紹react數(shù)據(jù)管理中的setState與Props知識,感興趣的朋友跟隨小編一起看看吧
2023-10-10
react?hooks?計數(shù)器實現(xiàn)代碼
這篇文章主要介紹了react?hooks計數(shù)器實現(xiàn)代碼，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2023-08-08
React實現(xiàn)語音識別并轉換功能
在現(xiàn)代 Web 開發(fā)中,語音識別技術的應用越來越廣泛,本文將介紹如何使用 React 實現(xiàn)一個簡單的語音識別并轉換的功能,有需要的小伙伴可以了解下
2025-05-05
react實現(xiàn)組件狀態(tài)緩存的示例代碼
本文主要介紹了react實現(xiàn)組件狀態(tài)緩存的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2023-02-02
React彈窗使用方式NiceModal重新思考
這篇文章主要為大家介紹了React彈窗使用方式NiceModal重新思考分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-08-08
詳解React?的數(shù)據(jù)流和生命周期
這篇文章主要介紹了React?的數(shù)據(jù)流和生命周期,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-08-08
ReactJS實現(xiàn)表單的單選多選和反選的示例
本篇文章主要介紹了ReactJS實現(xiàn)表單的單選多選和反選的示例，非常具有實用價值，需要的朋友可以參考下
2017-10-10
淺談React雙向數(shù)據(jù)綁定原理
在 React中是不存在雙向數(shù)據(jù)綁定的機制的，需要我們自己對其進行實現(xiàn)。本文主要介紹一下React雙向數(shù)據(jù)綁定，感興趣的可以了解一下
2021-11-11