当前位置：首页 > 文章列表 > 文章 > 前端 > 如何在 React 中使用 Suspense 来改进异步渲染

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

2024-12-28 14:34:09 0浏览收藏

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 (
    加载中...

}> ); } 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 (
    
      主应用
      
    
  );
}

export default App;

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

使用 Suspense

import React, { Suspense } from "react";

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

function App() {
  return (
    
      主应用
      加载 HeavyComponent...}>

); } 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 (
    
      主应用
      加载组件中...}>

); } 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 (
    
      加载中...

}> ); } export default App;