今天，我們將聊聊如何提升 React 應用的效能，確保應用能夠在不同情境下高效運行。效能優化是開發高效軟體的關鍵，不僅能提升使用者體驗，還能減少伺服器和用戶端的資源消耗。

為什麼要做效能優化？

效能優化可以確保應用在高負載情況下保持流暢，避免用戶因為頁面回應速度過慢而流失。就像一間餐廳如果服務速度慢，顧客體驗也會大打折扣。同樣，提升 React 應用的效能能夠讓用戶更快速地與應用互動，增強整體體驗。

React 效能優化的絕招

1. 程式碼分割（Code Splitting）

程式碼分割是提升效能的重要手段。可以將應用程式劃分為多個較小的部分，根據需要而動態加載，減少初始加載時間。

import React, { Suspense, lazy } from 'react';

const HeavyComponent = lazy(() => import('./HeavyComponent'));

function MyApp() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <HeavyComponent />
      </Suspense>
    </div>
  );
}

2. 虛擬列表（Virtualized List）

當處理大量資料時，使用虛擬列表技術可以有效降低渲染成本。這樣應用只會渲染當前可見區域的資料，而非一次渲染整個列表。

import React from 'react';
import { FixedSizeList as List } from 'react-window';

function Row({ index, style }) {
  return <div style={style}>Row {index}</div>;
}

function LongList() {
  return (
    <List
      height={400}
      itemCount={1000}
      itemSize={35}
      width={300}
    >
      {Row}
    </List>
  );
}

3. 記憶化（Memoization）

記憶化是一種記憶化技術，在[Day 10] React 效能優化：把網站的腿接起來中有介紹到，它可以避免不必要的重渲染，從而提升效能。對於經常重複渲染的元件，我們可以使用 React.memo 來優化。

import React, { memo } from 'react';

const MyComponent = memo(function MyComponent(props) {
  // 只有當 props 改變時才會重新渲染
});

4. 使用 useCallback 和 useMemo

這兩個 Hook 主要用於避免在每次渲染時重新創建函數或計算結果。useCallback 用來記憶函數，useMemo 則用來記憶計算結果。

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

function MyComponent({ data, onItemClick }) {
  const handleClick = useCallback((item) => {
    onItemClick(item);
  }, [onItemClick]);

  const sortedData = useMemo(() => {
    return [...data].sort();
  }, [data]);

  // ...
}

5. 避免不必要的渲染

透過 React 的 memo 和 useCallback 等技術，我們可以避免元件不必要的重複渲染，進一步提升效能。

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

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

  const increment = useCallback(() => {
    setCount(c => c + 1);
  }, []);

  return (
    <>
      <Counter count={count} />
      <Button onClick={increment}>Increment</Button>
    </>
  );
}

const Counter = React.memo(({ count }) => {
  return <div>Count: {count}</div>;
});

const Button = React.memo(({ onClick, children }) => {
  return <button onClick={onClick}>{children}</button>;
});

效能優化的實戰技巧

1. 使用 Chrome 開發者工具：Chrome 的 Performance 面板可以幫助你分析應用的效能瓶頸，找出哪些部分的渲染耗時過長。

2. 使用 React Developer Tools：React 的開發者工具提供 Profiler，能夠顯示每個元件的渲染時間，幫助你精準定位需要優化的部分。

3. 延遲加載（Lazy Loading）：對於非關鍵的元件或模組，使用延遲加載可以顯著縮短初始頁面加載的時間。

4. 使用生產版本：確保在生產環境中使用 React 的生產版本，它經過多層優化，相較於開發版本運行得更快。

5. 優化依賴：使用如 webpack-bundle-analyzer 這樣的工具來檢查和優化應用中的依賴大小，減少不必要的模組載入。

小結

今天，我們了解了多種 React 應用的效能優化技巧。效能優化是一個持續的過程，需要根據具體的應用情況和使用者需求來逐步調整。在開發初期，要先專注於寫出正確的程式碼，而效能優化應該是在應用穩定後再來進行，避免過早優化導致程式碼難以維護。

如果你想進一步深入了解 React 的效能優化，可以參考 React 官方文件中的效能優化章節。