react如何延迟加载
延迟加载的实现方法
React中实现延迟加载（Lazy Loading）通常使用React.lazy和Suspense组件，结合动态导入（Dynamic Imports）技术。这种方法能有效减少初始加载时间，提升应用性能。
使用React.lazy和Suspense
import React, { Suspense } from 'react';
const LazyComponent = React.lazy(() => import('./LazyComponent'));
function App() {
return (
<div>
<Suspense fallback={<div>Loading...</div>}>
<LazyComponent />
</Suspense>
</div>
);
}React.lazy接收一个返回动态导入的函数，Suspense提供加载中的备用UI（如加载动画）。
路由级别的延迟加载 在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>
);
}注意事项
命名导出处理
React.lazy默认支持默认导出（default export）。如需命名导出，需创建中间模块：
// MyComponent.js
export const MyComponent = () => <div>Named Export</div>;
// LazyNamedExport.js
export { MyComponent as default } from './MyComponent';
// 使用
const LazyNamed = React.lazy(() => import('./LazyNamedExport'));错误边界 建议用错误边界（Error Boundary）处理加载失败：
class ErrorBoundary extends React.Component {
state = { hasError: false };
static getDerivedStateFromError() { return { hasError: true }; }
render() { return this.state.hasError ? <h1>Load failed</h1> : this.props.children; }
}
// 使用
<ErrorBoundary>
<Suspense fallback={<div>Loading...</div>}>
<LazyComponent />
</Suspense>
</ErrorBoundary>替代方案
第三方库
@loadable/component：支持服务端渲染和更复杂的场景import loadable from '@loadable/component'; const LazyLoadable = loadable(() => import('./Component'), { fallback: <div>Loading...</div>, });
图片延迟加载
使用原生loading="lazy"属性或Intersection Observer API：
<img src="image.jpg" loading="lazy" alt="Lazy-loaded" />
