首頁 > web前端 > js教程 > 如何在 React 中使用 Suspense 來改進非同步渲染

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

Susan Sarandon
發布: 2025-01-01 03:01:10
原創
695 人瀏覽過

How to Use Suspense in React for Improved Asynchronous Rendering

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中文網其他相關文章!

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板