react如何延迟加载
延迟加载的实现方法
在React中实现延迟加载（Lazy Loading）通常用于优化应用性能，减少初始加载时的资源体积。以下是几种常见方法：
使用React.lazy和Suspense React.lazy函数允许动态导入组件，配合Suspense组件实现加载时的回退UI。
import React, { Suspense } from 'react';
const LazyComponent = React.lazy(() => import('./LazyComponent'));
function App() {
return (
<div>
<Suspense fallback={<div>Loading...</div>}>
<LazyComponent />
</Suspense>
</div>
);
}路由级别的延迟加载 结合React Router实现路由级别的延迟加载，提升页面切换效率。
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
const Home = React.lazy(() => import('./routes/Home'));
function App() {
return (
<Router>
<Suspense fallback={<div>Loading...</div>}>
<Routes>
<Route path="/" element={<Home />} />
</Routes>
</Suspense>
</Router>
);
}图片延迟加载 对于图片资源，可使用loading="lazy"属性或Intersection Observer API实现视口外图片的延迟加载。
<img src="image.jpg" loading="lazy" alt="Lazy loaded" />自定义Hook实现组件延迟加载 通过Intersection Observer创建自定义Hook，控制组件何时渲染。
function useLazyLoad(ref) {
const [isVisible, setIsVisible] = useState(false);
useEffect(() => {
const observer = new IntersectionObserver(([entry]) => {
if (entry.isIntersecting) {
setIsVisible(true);
observer.unobserve(ref.current);
}
});
observer.observe(ref.current);
return () => observer.disconnect();
}, [ref]);
return isVisible;
}注意事项
- Suspense的fallback应提供有意义的加载状态，避免布局偏移
- 生产环境需确保打包工具支持代码分割（如Webpack的SplitChunksPlugin）
- 移动端注意网络速度对延迟加载体验的影响
- 重要内容应避免延迟加载，以防影响SEO和核心用户体验
通过合理运用这些技术，可显著提升React应用的加载性能和用户体验。
