如何在 React 中使用 Suspense 來改進非同步渲染

React 中的懸念

React Suspense 是一項強大的功能，允許開發人員透過在載入元件或資料時顯示後備 UI 來優雅地處理非同步渲染。它與 React.lazy、並發渲染 和 資料取得 解決方案（例如 React Query、Relay 或自訂實作）協同工作。

---

懸念如何運作

1. Placeholder Fallback：Suspense 環繞需要等待非同步操作的元件。等待時，它會顯示後備 UI（例如載入微調器）。
2. 自動渲染：非同步操作完成後，渲染真實的元件或資料。

---

基本文法

import React, { Suspense } from "react";

const LazyComponent = React.lazy(() => import("./LazyComponent"));

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

export default App;

• React.Suspense：包裹延遲載入的元件。
• fallback：指定等待元件載入時顯示的 UI。

---

懸念的用例

1. 延遲載入元件：使用 React.lazy 動態載入元件。
2. 資料取得：與 Relay 或 React Query 等函式庫結合使用時管理非同步資料載入。
3. 並發渲染：最佳化並發 React 模式下的渲染。

---

範例 1：帶有懸念的延遲載入

無懸念

import React from "react";
import HeavyComponent from "./HeavyComponent";

function App() {
  return (
    <div>
      <h1>Main App</h1>
      <HeavyComponent />
    </div>
  );
}

export default App;

HeavyComponent 同步加載，增加了初始載入時間。

有懸念

import React, { Suspense } from "react";

const HeavyComponent = React.lazy(() => import("./HeavyComponent"));

function App() {
  return (
    <div>
      <h1>Main App</h1>
      <Suspense fallback={<div>Loading Heavy Component...</div>}>
        <HeavyComponent />
      </Suspense>
    </div>
  );
}

export default App;

現在，HeavyComponent 僅在需要時加載，在加載過程中顯示回退。

---

範例 2：具有多個惰性組件的 Suspense

import React, { Suspense } from "react";

const ComponentA = React.lazy(() => import("./ComponentA"));
const ComponentB = React.lazy(() => import("./ComponentB"));

function App() {
  return (
    <div>
      <h1>Main App</h1>
      <Suspense fallback={<div>Loading Components...</div>}>
        <ComponentA />
        <ComponentB />
      </Suspense>
    </div>
  );
}

export default App;

後備 UI 將顯示，直到兩個元件完成載入。

---

範例 3：資料獲取的暫停（實驗）

當與 Relay 或 React Query 等庫整合時，React Suspense 對於非同步資料擷取也很有用。

React 查詢範例

import React, { Suspense } from "react";
import { useQuery } from "react-query";

function DataComponent() {
  const { data } = useQuery("fetchData", fetchData);

  return <div>{data}</div>;
}

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

export default App;

---

帶有懸念的錯誤處理

如果在載入元件或資料的過程中發生錯誤，React Suspense 不提供內建的錯誤處理。為此，請使用錯誤邊界。

import React, { Suspense } from "react";

const LazyComponent = React.lazy(() => import("./LazyComponent"));

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

export default App;

---

使用懸念的最佳實踐

1. 簡單回退：使用輕量級佔位符來避免效能開銷。
2. 與錯誤邊界結合：確保正確處理元件或資料載入失敗。
3. 智慧分塊：將您的應用程式劃分為邏輯塊以獲得更好的效能。

---

懸念的好處

1. 改進的使用者體驗：透過顯示後備 UI 確保應用程式保持回應。
2. 減少捆綁包大小：與程式碼分割搭配使用，可最佳化捆綁包大小。
3. 簡化的非同步處理：以更具聲明性的方式管理載入狀態。

---

進階運用：嵌套懸念

您可以嵌套多個 Suspense 元件，以對後備狀態進行精細控制。

import React from "react";
import HeavyComponent from "./HeavyComponent";

function App() {
  return (
    <div>
      <h1>Main App</h1>
      <HeavyComponent />
    </div>
  );
}

export default App;

---

懸念的局限性

1. 資料取得支援：直接取得資料的實驗功能。
2. 無錯誤處理：需要額外的錯誤處理機制，例如錯誤邊界。
3. 瀏覽器相容性：需要支援 ES6 模組和承諾的現代瀏覽器。

---

結論

React Suspense 是一個用於管理 React 應用程式中非同步渲染的多功能工具。它簡化了載入狀態的處理，透過延遲載入增強了效能，並與程式碼分割和錯誤處理技術相結合，創造了更流暢的使用者體驗。

---

以上是如何在 React 中使用 Suspense 來改進非同步渲染的詳細內容。更多資訊請關注PHP中文網其他相關文章！