讲师中心微信公众号

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机游戏

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

花韻仙語

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

1081人浏览过

来源于php中文网

原创

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

}> ); } 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 可用于处理异步数据加载。

Cutout老照片上色

Cutout.Pro推出的黑白图片上色

下载

错误处理

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

import React, { Suspense } from "react";

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

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

function App() {
  return (
    
      加载中...

}> ); } export default App;

最佳实践

简洁的占位符：使用轻量级占位符，避免性能损耗。
结合错误边界：处理组件或数据加载失败。
合理分块：将应用划分成逻辑块，优化性能。

优势

提升用户体验：显示占位符，保持应用响应。
减小包大小：配合代码分割，优化包大小。
简化异步处理：更声明式地管理加载状态。

高级用法：嵌套 Suspense

可以嵌套 Suspense 组件，实现更精细的加载状态控制。

限制

数据获取支持：目前为实验性功能。
无内置错误处理：需要手动添加错误边界。
浏览器兼容性：需要支持 ES6 模块和 Promise 的现代浏览器。

结论

React Suspense 是一个强大的工具，简化了异步渲染的处理，提升了性能和用户体验。它与其他 React 功能结合，提供了更流畅的应用体验。

JavaScript如何实现机器学习_JavaScript中TensorFlow.js怎样使用

javascript怎样实现国际化？_javascript中如何处理多语言文本？

怎样使用Template元素_它如何提高渲染效率

javascript的DOM是什么_如何动态地操作网页元素？

javascript防抖是什么_如何用它优化高频触发的事件？

相关专题

es6新特性

es6新特性有：1、块级作用域变量；2、箭头函数；3、模板字符串；4、解构赋值；5、默认参数；6、扩展运算符；7、类和继承；8、Promise。本专题为大家提供es6新特性的相关的文章、下载、课程内容，供大家免费下载体验。

2023.07.17

es6新特性有哪些

es6的新特性有：1、块级作用域；2、箭头函数；3、解构赋值；4、默认参数；5、扩展运算符；6、模板字符串；7、类和模块；8、迭代器和生成器；9、Promise对象；10、模块化导入和导出等等。本专题为大家提供es6新特性的相关的文章、下载、课程内容，供大家免费下载体验。

185

2023.08.04

JavaScript ES6新特性

ES6是JavaScript的根本性升级，引入let/const实现块级作用域、箭头函数解决this绑定问题、解构赋值与模板字符串简化数据处理、对象简写与模块化提升代码可读性与组织性。本专题为大家提供相关的文章、下载、课程内容，供大家免费下载体验。

181

2025.12.24

promise的用法

“promise” 是一种用于处理异步操作的编程概念，它可以用来表示一个异步操作的最终结果。Promise 对象有三种状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败）。Promise的用法主要包括构造函数、实例方法（then、catch、finally）和状态转换。

295

2023.10.12

html文本框类型介绍

html文本框类型有单行文本框、密码文本框、数字文本框、日期文本框、时间文本框、文件上传文本框、多行文本框等等。详细介绍：1、单行文本框是最常见的文本框类型，用于接受单行文本输入，用户可以在文本框中输入任意文本，例如用户名、密码、电子邮件地址等；2、密码文本框用于接受密码输入，用户在输入密码时，文本框中的内容会被隐藏，以保护用户的隐私；3、数字文本框等等。

390

2023.10.12