react如何实现组件异步加载
实现 React 组件异步加载的方法
使用 React.lazy 和 Suspense
React.lazy 是 React 官方提供的异步加载组件的方法，需要与 Suspense 配合使用。React.lazy 接受一个返回动态 import() 的函数，返回一个 Promise。
import React, { Suspense } from 'react';
const AsyncComponent = React.lazy(() => import('./AsyncComponent'));
function App() {
return (
<div>
<Suspense fallback={<div>Loading...</div>}>
<AsyncComponent />
</Suspense>
</div>
);
}Suspense 的 fallback 属性用于在组件加载期间显示加载状态。
自定义高阶组件
可以创建一个高阶组件（HOC）来封装异步加载逻辑，适用于需要更复杂控制的情况。
import React, { useState, useEffect } from 'react';
function asyncComponent(importComponent) {
return function(props) {
const [Component, setComponent] = useState(null);
useEffect(() => {
importComponent().then(cmp => {
setComponent(cmp.default || cmp);
});
}, []);
return Component ? <Component {...props} /> : <div>Loading...</div>;
};
}
const AsyncComponent = asyncComponent(() => import('./AsyncComponent'));结合路由的异步加载
在 React Router 中实现路由级别的异步加载，可以优化页面切换性能。
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>
);
}错误边界处理
异步加载可能失败，可以使用错误边界（Error Boundary）来捕获并处理错误。
class ErrorBoundary extends React.Component {
state = { hasError: false };
static getDerivedStateFromError(error) {
return { hasError: true };
}
componentDidCatch(error, info) {
console.error(error, info);
}
render() {
if (this.state.hasError) {
return <h1>Something went wrong.</h1>;
}
return this.props.children;
}
}
function App() {
return (
<ErrorBoundary>
<Suspense fallback={<div>Loading...</div>}>
<AsyncComponent />
</Suspense>
</ErrorBoundary>
);
}动态导入的命名导出
如果组件是命名导出而非默认导出，需要稍微调整导入方式。
const AsyncComponent = React.lazy(() =>
import('./AsyncComponent').then(module => ({ default: module.AsyncComponent }))
);预加载策略
可以在用户可能访问组件前预先加载，例如在鼠标悬停时触发加载。
const AsyncComponent = React.lazy(() => import('./AsyncComponent'));
function PreloadComponent() {
const [loaded, setLoaded] = useState(false);
const preload = () => {
import('./AsyncComponent');
setLoaded(true);
};
return (
<div onMouseEnter={preload}>
{loaded ? (
<Suspense fallback={<div>Loading...</div>}>
<AsyncComponent />
</Suspense>
) : (
<div>Hover to load</div>
)}
</div>
);
}
