react中如何实现懒加载
实现懒加载的几种方法
在React中实现懒加载可以有效提升应用性能，减少初始加载时间。以下是几种常见方法：
使用React.lazy和Suspense
React.lazy函数允许动态导入组件，结合Suspense组件实现懒加载。适用于React 16.6及以上版本。
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中实现按路由懒加载，结合React.lazy使用：
import { BrowserRouter as Router, Route, Switch } 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>}>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
</Switch>
</Suspense>
</Router>
);
}图片懒加载
对于图片资源，可以使用Intersection Observer API或第三方库：
import { useState, useEffect, useRef } from 'react';
function LazyImage({ src, alt }) {
const [isLoaded, setIsLoaded] = useState(false);
const imgRef = useRef();
useEffect(() => {
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
setIsLoaded(true);
observer.unobserve(entry.target);
}
});
});
observer.observe(imgRef.current);
return () => observer.disconnect();
}, []);
return (
<img
ref={imgRef}
src={isLoaded ? src : ''}
alt={alt}
style={{ opacity: isLoaded ? 1 : 0, transition: 'opacity 0.3s' }}
/>
);
}自定义懒加载Hook
可以创建自定义Hook实现更灵活的懒加载逻辑：
import { useState, useEffect } from 'react';
function useLazyLoad(ref) {
const [isVisible, setIsVisible] = useState(false);
useEffect(() => {
const observer = new IntersectionObserver(([entry]) => {
if (entry.isIntersecting) {
setIsVisible(true);
observer.disconnect();
}
});
observer.observe(ref.current);
return () => observer.disconnect();
}, [ref]);
return isVisible;
}
function LazyComponentWrapper() {
const ref = useRef();
const isVisible = useLazyLoad(ref);
return (
<div ref={ref}>
{isVisible && <ExpensiveComponent />}
</div>
);
}注意事项
- 确保fallback内容提供良好的用户体验
- 考虑SSR场景下可能需要额外配置
- 对于复杂应用，可以结合代码分割工具如Webpack的SplitChunksPlugin
- 测试懒加载组件在不同网络条件下的表现
这些方法可以根据具体需求组合使用，实现最佳性能优化效果。
