避免 React 中不必要的重新渲染

建立高效能 React 應用程式的關鍵之一是避免不必要的重新渲染。 React 的渲染引擎非常高效，但防止在不需要的地方重新渲染仍然至關重要。在這篇文章中，我們將介紹常見錯誤以及如何避免這些錯誤。

---

1. 使用 React.memo 記憶組件

當元件的 props 沒有改變時，記憶化可以幫助你跳過重新渲染。然而，如果不實作自訂比較函數，很容易誤用 React.memo。

錯誤用法：

const MemoizedComponent = React.memo(MyComponent);

這僅檢查 props 引用是否已更改，這可能並不總是足夠的。

正確用法：

const MemoizedComponent = React.memo(MyComponent, (prevProps, nextProps) => {
  return prevProps.itemId === nextProps.itemId;
});

在這裡，我們使用自訂比較函數，只有在 itemId 屬性變更時才會觸發重新渲染。

---

2. 避免過度使用內聯函數

在 JSX 中使用內聯函數可能會導致不必要的重新渲染，因為 React 在每次渲染時都會將新函數視為新的 prop。

錯誤用法：

function ButtonComponent() {
  return <button onClick={() => handleClick()}>Click me</button>;
}

這會導致在每次渲染時重新建立handleClick，從而導致不必要的重新渲染。

正確用法：

import { useCallback } from 'react';

function ButtonComponent() {
  const handleClick = useCallback(() => {
    // Handle click logic
  }, []);

  return <button onClick={handleClick}>Click me</button>;
}

透過使用 useCallback，我們記住了 handleClick 函數，從而防止在每次渲染時進行不必要的重新建立。

---

3. 利用 PureComponent

使用類別元件時，使用 React.PureComponent 可確保元件僅在其 props 或狀態變更時重新渲染。如果您使用 React.Component，可能會導致不必要的重新渲染。

錯誤用法：

class CardComponent extends React.Component {
  // Component logic
}

正確用法：

class CardComponent extends React.PureComponent {
  // Component logic
}

透過擴展 React.PureComponent，React 將淺層比較 props 和 state，避免不必要的重新渲染。

---

4. 最佳化功能組件中的useSelector

當使用react-redux中的useSelector時，僅選擇狀態的必要部分非常重要。

錯誤用法：

import { useSelector } from 'react-redux';

const DataComponent = () => {
  const globalState = useSelector((state) => state);
  // Render logic
};

每當狀態的任何部分發生變化時，這都會導致元件重新渲染。

正確用法：

import { useSelector } from 'react-redux';

const DataComponent = () => {
  const selectedData = useSelector((state) => state.specificSlice);
  // Render logic based on specific slice
};

透過僅選擇狀態的必要部分，可以最大限度地減少重新渲染。

---

5. 在類別元件中實作shouldComponentUpdate

對於不擴展 PureComponent 的類別元件，手動實作 shouldComponentUpdate 可以更精細地控制元件何時重新渲染。

錯誤用法：

class ListItem extends React.Component {
  // Component logic
}

每次父元件渲染時都會重新渲染，即使 props 和 state 沒有改變。

正確用法：

class ListItem extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    return this.props.itemId !== nextProps.itemId || this.state.value !== nextState.value;
  }

  // Component logic
}

透過自訂shouldComponentUpdate，我們確保元件僅在 itemId 屬性或值狀態變更時重新渲染。

---

結論

透過採用這些技術，您可以顯著減少 React 應用程式中不必要的重新渲染，從而獲得更好的效能。使用 React.memo 實現記憶化、利用 PureComponent 以及微調 shouldComponentUpdate 是優化 React 元件的關鍵策略。

了解何時以及如何優化渲染可以透過提供更快、響應更靈敏的應用程式來大大增強用戶體驗。

---

參考：

1. 極客們的極客們。 （2023）。 React 中的記憶化是什麼？
2. 同步融合。 （2024）。 React 中的記憶化
3. 海格拉夫。 （2024）。什麼是 React Memo 以及如何使用它？
4. Refine.dev。 （2024）。帶有範例的 React 備忘錄指南

如果您發現本指南有用，請考慮與其他人分享！ ？

---

本部落格提供了更新且全面的概述，介紹如何避免 React 應用程式中不必要的重新渲染，同時結合最佳實踐並更改變數名稱，以提高現代 Web 開發實踐的清晰度和相關性。

引用：
[1] https://www.geeksforgeeks.org/what-is-memoization-in-react/
[2] https://stackoverflow.com/questions/74013864/why-arent-all-react-components-wrapped-with-react-memo-by-default
[3] https://www.syncfusion.com/blogs/post/what-is-memoization-in-react
[4] https://hygraph.com/blog/react-memo
[5] https://refine.dev/blog/react-memo-guide/
[6] https://dmitripavlutin.com/use-react-memo-wisely/
[7] https://www.topcoder.com/thrive/articles/memoization-in-react-js
[8] https://react.dev/reference/react/memo

以上是避免 React 中不必要的重新渲染的詳細內容。更多資訊請關注PHP中文網其他相關文章！