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

1. 使用 React.memo 記憶組件

當元件的 props 沒有改變時，Memoization 可以幫助你跳過重新渲染。然而，如果不實作自訂比較函數，很容易誤用 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  handleClick()}>Click me;
}

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

正確用法：

import { useCallback } from 'react';

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

  return Click me;
}

透過使用 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. Hygraph。 （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