react如何延迟加载
延迟加载的实现方法
React中实现延迟加载（Lazy Loading）主要通过React.lazy和Suspense组件完成，用于动态导入组件并优化性能。
使用React.lazy动态导入组件
React.lazy允许动态导入组件，语法如下：
const MyComponent = React.lazy(() => import('./MyComponent'));此方法会将组件打包成单独的代码块，仅在需要时加载。
配合Suspense处理加载状态
Suspense用于包裹延迟加载的组件，提供加载中的回退UI：
import React, { Suspense } from 'react';
function App() {
return (
<div>
<Suspense fallback={<div>Loading...</div>}>
<MyComponent />
</Suspense>
</div>
);
}fallback属性接受任何React元素，在组件加载期间显示。
路由级别的延迟加载
结合React Router实现路由级懒加载：
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
const Home = React.lazy(() => import('./routes/Home'));
const About = React.lazy(() => import('./routes/About'));
function App() {
return (
<Router>
<Suspense fallback={<div>Loading...</div>}>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</Suspense>
</Router>
);
}命名导出组件的处理
若组件使用命名导出，需通过中间模块转换：
// MyComponent.js
export const MyComponent = () => <div>Content</div>;
// 使用中间模块
// IntermediateComponent.js
export { MyComponent as default } from './MyComponent';
// 延迟加载
const MyComponent = React.lazy(() => import('./IntermediateComponent'));预加载策略
通过事件触发预加载，提升用户体验：
const MyComponent = React.lazy(() => import('./MyComponent'));
function App() {
const [show, setShow] = useState(false);
const handleMouseOver = () => {
import('./MyComponent');
};
return (
<div onMouseOver={handleMouseOver}>
<button onClick={() => setShow(true)}>Show</button>
{show && (
<Suspense fallback={<div>Loading...</div>}>
<MyComponent />
</Suspense>
)}
</div>
);
}注意事项
- 仅支持默认导出（default exports）
- 服务端渲染需配合额外库（如
loadable-components） - 错误边界可捕获加载失败情况
- Webpack会自动代码分割，无需额外配置
通过以上方法可有效减少初始加载时间，提升应用性能。
