React中 lazy与 Suspense懒加载的组件
MyHead.jsx
console.log('MyHead.jsx');
function Head() {return <>hello Head</>;
}
export default Head;
懒加载.jsx
// 引入 React 的 useState、lazy 和 Suspense API
// lazy 用于懒加载组件，Suspense 用于在加载过程中显示 loading 状态
import { useState, lazy, Suspense } from 'react';// 使用 lazy + 动态 import 实现组件懒加载
// 只有当组件首次被渲染时才会加载 MyHead 组件
const Head = lazy(() => import('./MyHead'));// App 根组件
function App() {// 控制是否显示懒加载组件的状态const [show, setShow] = useState(false);return (<>{/* 页面初始内容 */}hello App{/* 点击按钮后触发 setShow(true)，使组件开始加载 */}<button onClick={() => setShow(true)}>点击</button>{/* 当 show 为 true 时才渲染 Head 组件 */}{show && (// 必须用 <Suspense> 包裹 lazy 加载的组件// fallback 表示加载过程中显示的内容<Suspense fallback={<div>loading...</div>}><Head /> {/* 实际要懒加载的组件 */}</Suspense>)}</>);
}// 导出 App 组件供其他模块使用
export default App;🔍 注释说明总结
| 部分 | 说明 |
|---|---|
lazy(() => import('...')) | 实现组件按需加载，只有在使用时才请求该模块 |
Suspense fallback={...} | 在组件加载完成前展示一个 loading 状态 |
useState(false) | 控制懒加载组件的显示时机 |
onClick={() => setShow(true)} | 点击按钮后触发组件加载 |