如何在 React 中使用 Suspense 来改进异步渲染-js教程-PHP中文网

如何在 React 中使用 Suspense 来改进异步渲染

花韻仙語

发布： 2024-12-19 22:00:23

原创

948人浏览过

如何在 react 中使用 suspense 来改进异步渲染

React Suspense：优雅处理异步渲染

React Suspense 是一个强大的功能，可帮助开发者更优雅地处理异步渲染过程，在组件或数据加载期间显示占位符 UI。它与 React.lazy、并发模式和数据获取方案（如 React Query、Relay 或自定义方案）配合使用。

工作原理

占位符 (fallback)：Suspense 组件包裹需要等待异步操作完成的组件。等待期间，它会渲染一个占位符 UI（例如加载动画）。
自动渲染：异步操作完成后，Suspense 会自动渲染真实的组件或数据。

基本语法

import React, { Suspense } from "react";

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

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

export default App;

登录后复制

React.Suspense：包裹需要延迟加载的组件。
fallback：指定加载期间显示的 UI。

使用场景

延迟加载组件：使用 React.lazy 动态加载组件，按需加载，减小初始包大小。
数据获取：结合 React Query 或 Relay 等库，管理异步数据加载，并在数据可用前显示占位符。
并发渲染：优化并发模式下的渲染性能。

示例 1：延迟加载组件

无 Suspense

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

function App() {
  return (
    <div>
      <h1>主应用</h1>
      <HeavyComponent />
    </div>
  );
}

export default App;

登录后复制

HeavyComponent 同步加载，增加初始加载时间。

使用 Suspense

import React, { Suspense } from "react";

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

function App() {
  return (
    <div>
      <h1>主应用</h1>
      <Suspense fallback={<div>加载 HeavyComponent...</div>}>
        <HeavyComponent />
      </Suspense>
    </div>
  );
}

export default App;

登录后复制

HeavyComponent 延迟加载，加载过程中显示占位符。

示例 2：多个延迟加载组件

import React, { Suspense } from "react";

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

function App() {
  return (
    <div>
      <h1>主应用</h1>
      <Suspense fallback={<div>加载组件中...</div>}>
        <ComponentA /><ComponentB />
      </Suspense>
    </div>
  );
}

export default App;

登录后复制

占位符显示直到两个组件都加载完成。

示例 3：数据获取 (实验性)

结合 React Query 等库，Suspense 可用于处理异步数据加载。

错误处理

Suspense 本身不提供错误处理机制，需要结合错误边界使用：

import React, { Suspense } from "react";

class ErrorBoundary extends React.Component {
  // ...错误边界逻辑...
}

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

function App() {
  return (
    <ErrorBoundary>
      <Suspense fallback={<div>加载中...</div>}>
        <LazyComponent />
      </Suspense>
    </ErrorBoundary>
  );
}

export default App;

登录后复制