react 中 Suspense 和lazy 使用场景介绍

在 React 中，Suspense 和 lazy 是配合使用的特性，主要用于组件的懒加载（代码分割），它们可以帮助优化应用的加载性能，尤其适合大型应用。

核心作用

React.lazy：动态导入组件，实现代码分割（将组件代码拆分为单独的 chunk 文件）
Suspense：在懒加载组件加载完成前，显示指定的加载状态（fallback）

使用场景

1. 路由级别的代码分割（最常用）

大型应用通常有多个路由页面，使用 lazy 和 Suspense 可以实现路由级别的按需加载，只有当用户访问某个路由时，才加载对应页面的代码。

import React, { lazy, Suspense } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';// 懒加载路由组件
const Home = lazy(() => import('./routes/Home'));
const About = lazy(() => import('./routes/About'));
const Contact = lazy(() => import('./routes/Contact'));function App() {return (<Router><Suspense fallback={<div>Loading...</div>}><Routes><Route path="/" element={<Home />} /><Route path="/about" element={<About />} /><Route path="/contact" element={<Contact />} /></Routes></Suspense></Router>);
}

2. 大型组件的按需加载

对于不常使用或体积较大的组件（如下拉菜单、模态框、图表组件等），可以在需要时才加载其代码。

import React, { lazy, Suspense, useState } from 'react';// 懒加载大型图表组件
const BigChart = lazy(() => import('./BigChart'));function Dashboard() {const [showChart, setShowChart] = useState(false);return (<div><h1>Dashboard</h1><button onClick={() => setShowChart(true)}>显示详细图表</button>{showChart && (<Suspense fallback={<div>Loading chart...</div>}><BigChart /></Suspense>)}</div>);
}

3. 条件渲染的组件

当组件仅在特定条件下才会被渲染时（如用户权限、特定操作后），适合使用懒加载减少初始加载体积。

import React, { lazy, Suspense } from 'react';// 懒加载管理员组件（仅管理员可见）
const AdminPanel = lazy(() => import('./AdminPanel'));function UserArea({ isAdmin }) {return (<div><h1>User Area</h1>{isAdmin && (<Suspense fallback={<div>Loading admin tools...</div>}><AdminPanel /></Suspense>)}</div>);
}