使用 React Memo 告別不必要的重新渲染：逐步教程

React Memo：透過簡單的記憶提升 React 表現

介紹

React 應用程式通常處理大型資料集和複雜的元件，其中不必要的重新渲染會顯著影響效能。為了解決這個問題，React 提供了 React.memo——一個簡單但功能強大的工具，可以優化元件並減少渲染時間。在本指南中，我們將探討 React Memo 的工作原理、它為何有用以及如何逐步實現它。

---

什麼是 React 備忘錄？

React.memo 是 React 中的一個高階組件 (HOC)，有助於記憶功能組件。記憶化是根據函數的輸入快取函數輸出的過程，因此函數不必為相同的輸入重新計算結果。 React Memo 的工作原理類似：它「記住」元件的最後渲染輸出，並且僅在其 props 更改時重新渲染它。

為什麼要反應備忘錄？

在 React 中，只要父元件重新渲染，元件就會重新渲染。如果組件的輸出不依賴其父組件的更改，這可能會導致效率低下。例如，在具有許多元件的複雜 UI 中，您可能會因過度重新渲染而出現延遲。使用 React Memo 可以透過僅在必要時更新元件來優化這一點。

---

React Memo 解決的問題

1. 不必要的重新渲染

當父元件重新渲染時，其子元件也會重新渲染。這可能會導致效能瓶頸，尤其是當元件顯示靜態資料或依賴不變的 props 時。

2. 複雜 UI 中的延遲或效能緩慢

具有深度嵌套元件的應用程式可能會因累積重新渲染而面臨效能下降的問題。 Memoization 與 React Memo 一起有助於防止重新渲染不需要更新的元件，從而增強應用程式的回應能力。

---

React Memo 的工作原理：逐步範例

讓我們來看看 React Memo 的基本實作。我們將從一個不使用記憶化的簡單元件開始，看看添加 React Memo 如何產生影響。

步驟 1： 設定一個沒有 React Memo 的簡單計數器元件

import React, { useState } from 'react';

function Counter({ count }) {
  console.log('Counter component re-rendered');
  return <h1 id="Count-count">Count: {count}</h1>;
}

function App() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('');

  return (
    <div>
      <counter count="{count}"></counter>
      <button onclick="{()"> setCount(count + 1)}>Increment Count</button>
      <input type="text" value="{text}" onchange="{(e)"> setText(e.target.value)} placeholder="Type something..." />
    </div>
  );
}

export default App;

解釋

在此範例中，每次在輸入欄位中鍵入內容時，即使計數值保持不變，計數器元件也會重新呈現。這是不必要的重新渲染，我們可以使用 React Memo 來防止。

第 2 步：使用 React Memo 進行優化

現在，讓我們用 React.memo 包裝 Counter 元件來優化它。

import React, { useState } from 'react';

function Counter({ count }) {
  console.log('Counter component re-rendered');
  return <h1 id="Count-count">Count: {count}</h1>;
}

function App() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('');

  return (
    <div>
      <counter count="{count}"></counter>
      <button onclick="{()"> setCount(count + 1)}>Increment Count</button>
      <input type="text" value="{text}" onchange="{(e)"> setText(e.target.value)} placeholder="Type something..." />
    </div>
  );
}

export default App;

解釋

使用 React.memo，Counter 元件僅在其 count 屬性變更時才會重新渲染。現在，在輸入欄位中鍵入內容不再觸發 Counter 的重新渲染，從而顯著優化了效能。

---

React Memo 實際應用：帶有清單的實際場景

讓我們深入研究一個更複雜的範例，看看 React Memo 的真正好處。假設我們有一個項目列表，每個項目旁邊都有一個「喜歡」按鈕。我們將示範 React Memo 如何在按讚單一專案時防止過度重新渲染。

步驟1：建立不帶備忘錄的清單組件

import React, { useState } from 'react';

const Counter = React.memo(function Counter({ count }) {
  console.log('Counter component re-rendered');
  return <h1 id="Count-count">Count: {count}</h1>;
});

function App() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('');

  return (
    <div>
      <counter count="{count}"></counter>
      <button onclick="{()"> setCount(count + 1)}>Increment Count</button>
      <input type="text" value="{text}" onchange="{(e)"> setText(e.target.value)} placeholder="Type something..." />
    </div>
  );
}

export default App;

問題

在上面的程式碼中，當您喜歡一項時，所有項目都會重新渲染，即使只有一項的喜歡發生變化。

步驟 2：使用 React Memo 最佳化 Item 元件

import React, { useState } from 'react';

function Item({ item, onLike }) {
  console.log(`Rendering ${item.name}`);
  return (
    <div>
      <h2 id="item-name">{item.name}</h2>
      <button onclick="{()"> onLike(item.id)}>Like</button>
    </div>
  );
}

function ItemList() {
  const [items, setItems] = useState([
    { id: 1, name: 'Item 1', likes: 0 },
    { id: 2, name: 'Item 2', likes: 0 },
    { id: 3, name: 'Item 3', likes: 0 },
  ]);

  const handleLike = (id) => {
    setItems((prevItems) =>
      prevItems.map((item) =>
        item.id === id ? { ...item, likes: item.likes + 1 } : item
      )
    );
  };

  return (
    <div>
      {items.map((item) => (
        <item key="{item.id}" item="{item}" onlike="{handleLike}"></item>
      ))}
    </div>
  );
}

export default ItemList;

結果

現在，只有您點擊喜歡的項目才會重新渲染，從而使 UI 更快、更有效率。

---

何時使用 React 備忘錄？

React Memo 在特定場景下很有用，但在任何地方使用它都會使你的程式碼變得複雜，而不會帶來真正的好處。以下是一些特別有效的關鍵情況：

1. 靜態元件：不常變更的元件，例如頁首或頁尾。
2. 純功能元件：僅依賴 props 進行渲染的元件。
3. 大型元件清單：包含許多需要避免不必要的重新渲染的項目的清單。

---

潛在的陷阱和最佳實踐

1. 淺比較：React Memo 進行淺比較，這表示它不會偵測深層巢狀物件或陣列中的變更。如果您要傳遞複雜的道具，請考慮使用 useMemo 或 useCallback。

2. 效能監控：使用 React DevTools 來辨識哪些元件真正受益於記憶化。過度使用 React Memo 會導致程式碼變得複雜，而效能提升卻可以忽略不計。

---

常見問題 (FAQ)

Q1：React Memo 與 useMemo 和 useCallback 有何不同？

• React Memo 根據 props 最佳化元件重新渲染。
• useMemo 在元件內快取計算值。
• useCallback 快取函數，防止它們在每次渲染時重新建立。

Q2：我可以將 React Memo 與類別元件一起使用嗎？

不，React Memo 僅適用於功能組件。但是，對於類別元件，可以使用 PureComponent 實作類似的行為。

---

結論

React Memo 是一個有價值的工具，可以減少不必要的重新渲染並提高 React 應用程式效能。透過選擇性地在純功能元件或靜態 UI 元素上使用它，您可以優化 React 應用程序，而無需使其結構複雜化。請按照以下步驟操作，嘗試範例，並不斷嘗試為您的專案找到最佳記憶策略！

以上是使用 React Memo 告別不必要的重新渲染：逐步教程的詳細內容。更多資訊請關注PHP中文網其他相關文章！