React Suspense 是一个强大的功能,可帮助开发者更优雅地处理异步渲染过程,在组件或数据加载期间显示占位符 UI。它与 React.lazy、并发模式和数据获取方案(如 React Query、Relay 或自定义方案)配合使用。
import React, { Suspense } from "react"; const LazyComponent = React.lazy(() => import("./LazyComponent")); function App() { return ( <Suspense fallback={<div>加载中...</div>}> <LazyComponent /> </Suspense> ); } export default App;
import React from "react"; import HeavyComponent from "./HeavyComponent"; function App() { return ( <div> <h1>主应用</h1> <HeavyComponent /> </div> ); } export default App;
HeavyComponent 同步加载,增加初始加载时间。
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 延迟加载,加载过程中显示占位符。
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;
占位符显示直到两个组件都加载完成。
结合 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;
可以嵌套 Suspense 组件,实现更精细的加载状态控制。
React Suspense 是一个强大的工具,简化了异步渲染的处理,提升了性能和用户体验。 它与其他 React 功能结合,提供了更流畅的应用体验。
以上就是如何在 React 中使用 Suspense 来改进异步渲染的详细内容,更多请关注php中文网其它相关文章!
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号