React 中的懸念

React Suspense 是一項強大的功能，允許開發(fā)人員通過在加載組件或數(shù)據(jù)時顯示后備 UI 來優(yōu)雅地處理異步渲染。它與 React.lazy、并發(fā)渲染 和 數(shù)據(jù)獲取 解決方案（例如 React Query、Relay 或自定義實現(xiàn)）協(xié)同工作。

---

懸念如何運作

1. Placeholder Fallback：Suspense 環(huán)繞需要等待異步操作的組件。等待時，它會顯示后備 UI（例如加載微調器）。
2. 自動渲染：異步操作完成后，渲染真實的組件或數(shù)據(jù)。

---

基本語法

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. 數(shù)據(jù)獲取：與 Relay 或 React Query 等庫結合使用時管理異步數(shù)據(jù)加載。
3. 并發(fā)渲染：優(yōu)化并發(fā) 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;

現(xiàn)在，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：數(shù)據(jù)獲取的暫停（實驗）

當與 Relay 或 React Query 等庫集成時，React Suspense 對于異步數(shù)據(jù)獲取也很有用。

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;

---

帶有懸念的錯誤處理

如果在加載組件或數(shù)據(jù)的過程中發(fā)生錯誤，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. 與錯誤邊界結合：確保正確處理組件或數(shù)據(jù)加載失敗。
3. 智能分塊：將您的應用程序劃分為邏輯塊以獲得更好的性能。

---

懸念的好處

1. 改進的用戶體驗：通過顯示后備 UI 確保應用程序保持響應。
2. 減小捆綁包大小：與代碼分割配合使用，可優(yōu)化捆綁包大小。
3. 簡化的異步處理：以更具聲明性的方式管理加載狀態(tài)。

---

高級運用：嵌套懸念

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

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

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

export default App;

---

懸念的局限性

1. 數(shù)據(jù)獲取支持：直接獲取數(shù)據(jù)的實驗功能。
2. 無錯誤處理：需要額外的錯誤處理機制，例如錯誤邊界。
3. 瀏覽器兼容性：需要支持 ES6 模塊和承諾的現(xiàn)代瀏覽器。

---

結論

React Suspense 是一個用于管理 React 應用程序中異步渲染的多功能工具。它簡化了加載狀態(tài)的處理，通過延遲加載增強了性能，并與代碼分割和錯誤處理技術相結合，創(chuàng)造了更流暢的用戶體驗。

---

以上是如何在 React 中使用 Suspense 來改進異步渲染的詳細內容。更多信息請關注PHP中文網(wǎng)其他相關文章！