React 效能最佳化技術：記憶化、延遲載入等

建立現代 Web 應用程式時，效能是關鍵。使用者期望應用程式快速、反應靈敏，即使是輕微的延遲也會導致沮喪。 React 雖然功能強大，但有時會遇到效能瓶頸，尤其是當應用程式規模和複雜性不斷增長時。幸運的是，有多種技術可以優化效能，包括記憶、延遲載入等等。

在本指南中，我們將詳細介紹一些最佳化 React 應用程式效能的最有效方法。我們將介紹記憶、延遲載入和 React Profiler 等工具的基礎知識，以幫助您識別和修復瓶頸。讓我們開始吧！

簡介：為什麼效能在現代 React 應用程式中很重要

將您的網路應用程式想像成一輛汽車——無論它的外觀多麼時尚，如果它性能不佳，用戶體驗就會受到影響。在 React 應用程式中，這種「效能」是指元件渲染的速度以及資料或狀態變更時更新的效率。

隨著你的 React 應用程式的擴展，不必要地重新渲染元件或一次加載大量套件可能會導致效能下降。這就是為什麼學習 React 效能最佳化 技術對於建立流暢、高效能的應用程式至關重要。

React 中的記憶化

如何有效使用 React.memo 和 useMemo

記憶化是一個奇特的詞，它的意思是快取函​​數呼叫的結果，這樣你就不必每次都重新計算。在 React 中，記憶化透過記住先前渲染的結果並在沒有任何更改的情況下使用快取的結果來幫助防止不必要的重新渲染。

React.memo

讓我們從 React.memo 開始。如果元件的 props 沒有改變，這個高階元件會阻止元件重新渲染。

例子：

const MyComponent = React.memo(function MyComponent({ name }) {
  console.log('Rendered');
  return <div>Hello, {name}</div>;
});

在此範例中，MyComponent 僅在 name 屬性變更時重新渲染。如果傳遞相同的名稱值，React 將跳過渲染，從而提高效能。

使用備忘錄

接下來是useMemo。該鉤子用於記住功能組件內昂貴的計算或值。

例子：

import { useMemo } from 'react';

function MyApp({ items }) {
  const expensiveCalculation = useMemo(() => {
    return items.reduce((total, item) => total + item.value, 0);
  }, [items]);

  return <div>Total Value: {expensiveCalculation}</div>;
}

這裡，計算僅在 items 數組更改時再次運行，避免在每次渲染時重新計算相同的結果，從而節省時間。

延遲載入組件

使用 React.lazy 縮短載入時間

延遲載入是一種技術，其中元件僅在需要時才載入，而不是預先載入所有內容。這有助於減少應用程式的初始載入時間，使其感覺更快。

React 提供了一個名為 React.lazy() 的內建函數，讓您可以按需載入元件。

例子：

const MyComponent = React.memo(function MyComponent({ name }) {
  console.log('Rendered');
  return <div>Hello, {name}</div>;
});

在此範例中，MyComponent 僅在實際需要時才會載入。 Suspense 元件在取得元件時提供後備 UI（如載入旋轉器），讓使用者體驗更加流暢。

用於效能監控的 React Profiler

如何識別瓶頸

無法衡量的東西很難優化。這就是 React Profiler 的用武之地。 React Profiler 可讓您追蹤元件的效能，識別緩慢的渲染，並測量重新渲染的「成本」。

要使用 React Profiler，只要用 包裝組件樹即可。並提供回調函數來收集性能數據。

例子：

import { useMemo } from 'react';

function MyApp({ items }) {
  const expensiveCalculation = useMemo(() => {
    return items.reduce((total, item) => total + item.value, 0);
  }, [items]);

  return <div>Total Value: {expensiveCalculation}</div>;
}

使用 Profiler，您可以追蹤每個元件渲染所需的時間，並找到可以改進效能的區域，例如不必要的重新渲染。

其他優化策略

程式碼分割、事件處理最佳化等

除了記憶和延遲載入之外，還有其他幾種技術可以提高 React 應用程式的效能：

1. 程式碼拆分：將您的應用程式分成更小的區塊，可以使用 Webpack 的程式碼分割功能按需載入。這會減少初始包的大小。

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

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

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

1. 事件處理最佳化：使用 useCallback 鉤子來記憶事件處理程序，防止它們在每次渲染時重新建立。

import { Profiler } from 'react';

function onRenderCallback(
  id, // the "id" prop of the Profiler tree that has just committed
  phase, // either "mount" (if the tree just mounted) or "update" (if it re-rendered)
  actualDuration, // time spent rendering the committed update
  baseDuration, // estimated time to render the entire subtree without memoization
  startTime, // when React began rendering this update
  commitTime, // when React committed this update
  interactions // the Set of interactions belonging to this update
) {
  console.log({ id, phase, actualDuration });
}

function MyApp() {
  return (
    <Profiler id="App" onRender={onRenderCallback}>
      <MyComponent />
    </Profiler>
  );
}

1. 去抖動與限制：透過去抖動或限制來最佳化事件偵聽器，例如捲動或調整大小，以限制更新頻率。

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

結論：使用這些技術建立高效能 React 應用程式

建立快速且有效率的 React 應用程式需要多種技術的組合。將 memoization 與 React.memo 和 useMemo 結合使用，您可以防止不必要的重新渲染。 延遲載入 使用 React.lazy 的元件可讓您透過僅在需要時取得元件來縮短載入時間。 React Profiler 可協助您辨識效能瓶頸並進行最佳化。

結合程式碼分割和事件最佳化等策略，您可以確保您的 React 應用程式提供流暢且響應迅速的用戶體驗，即使它們的大小和複雜性不斷增長。

---

準備好將您的 React 應用程式的效能提升到一個新的水平嗎？ 在您的專案中嘗試這些最佳化技術，並觀察您的應用程式的速度提高！

---

如果您喜歡這篇文章，請考慮支持我的工作：

• 請我喝杯咖啡
• 預約電話尋求指導或職業建議
• 在 Twitter 上追蹤我
• 在 LinkedIn 上聯絡

以上是React 效能最佳化技術：記憶化、延遲載入等的詳細內容。更多資訊請關注PHP中文網其他相關文章！