react实现懒加载
React 实现懒加载的方法
使用 React.lazy 和 Suspense
React 16.6 及以上版本提供了 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>
);
}Suspense 的 fallback 属性用于指定加载中的占位内容。
路由懒加载（React Router）
在 React Router 中结合 React.lazy 实现路由级懒加载，优化页面切换性能。
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import React, { Suspense } from 'react';
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 或第三方库（如 react-lazyload）实现图片懒加载，减少不必要的网络请求。
使用 react-lazyload 示例：
import LazyLoad from 'react-lazyload';
import placeholder from './placeholder.png';
function MyComponent() {
return (
<LazyLoad placeholder={<img src={placeholder} alt="placeholder" />}>
<img src="actual-image.jpg" alt="Actual" />
</LazyLoad>
);
}自定义懒加载钩子
通过自定义 Hook 结合 Intersection Observer API 实现通用懒加载逻辑。
import { useState, useEffect, useRef } from 'react';
function useLazyLoad() {
const [isVisible, setIsVisible] = useState(false);
const ref = useRef(null);
useEffect(() => {
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
setIsVisible(true);
observer.unobserve(entry.target);
}
});
});
if (ref.current) observer.observe(ref.current);
return () => {
if (ref.current) observer.unobserve(ref.current);
};
}, []);
return [ref, isVisible];
}
function LazyImage({ src, alt }) {
const [ref, isVisible] = useLazyLoad();
return (
<div ref={ref}>
{isVisible ? <img src={src} alt={alt} /> : <div>Loading...</div>}
</div>
);
}动态导入第三方库
对于非组件的懒加载（如大型库），可使用动态导入语法 import() 实现按需加载。
useEffect(() => {
import('heavy-library').then((library) => {
library.init();
});
}, []);注意事项
- 懒加载的组件需为默认导出（
export default）。 Suspense目前不支持服务端渲染（SSR），需配合Loadable Components等库解决。- 图片懒加载需考虑占位符和错误处理，避免布局偏移。
