React 中的懸念

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

---

懸念如何運作

1. Placeholder Fallback：Suspense 環(huán)繞需要等待非同步操作的元件。等待時，它會顯示後備 UI（例如載入微調(diào)器）。
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 動態(tài)載入元件。
2. 資料取得：與 Relay 或 React Query 等函式庫結(jié)合使用時管理非同步資料載入。
3. 並發(fā)渲染：最佳化並發(fā) React 模式下的渲染。

---

範(fàn)例 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;

現(xiàn)在，HeavyComponent 僅在需要時加載，在加載過程中顯示回退。

---

範(fàn)例 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 將顯示，直到兩個元件完成載入。

---

範(fàn)例 3：資料獲取的暫停（實驗）

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

React 查詢範(fàn)例

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;

---

帶有懸念的錯誤處理

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

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. 與錯誤邊界結(jié)合：確保正確處理元件或資料載入失敗。
3. 智慧分塊：將您的應(yīng)用程式劃分為邏輯塊以獲得更好的效能。

---

懸念的好處

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

---

進階運用：嵌套懸念

您可以嵌套多個 Suspense 元件，以對後備狀態(tài)進行精細(xì)控制。

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 模組和承諾的現(xiàn)代瀏覽器。

---

結(jié)論

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

---

以上是如何在 React 中使用 Suspense 來改進非同步渲染的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！