react如何动态导入组件
动态导入组件的方法
在React中，动态导入组件通常使用React.lazy和Suspense组合实现代码分割和懒加载。这种方法适用于需要按需加载组件以提高性能的场景。
使用React.lazy和Suspense
React.lazy函数允许动态导入组件，而Suspense组件用于在加载过程中显示回退内容（如加载指示器）。
import React, { Suspense } from 'react';
const DynamicComponent = React.lazy(() => import('./DynamicComponent'));
function App() {
return (
<div>
<Suspense fallback={<div>Loading...</div>}>
<DynamicComponent />
</Suspense>
</div>
);
}动态导入命名导出组件
如果需要动态导入具名导出（Named Export）的组件，可以通过then方法解构出需要的组件。
const DynamicNamedComponent = React.lazy(() =>
import('./DynamicNamedComponent').then((module) => ({
default: module.NamedComponent,
}))
);结合路由的动态导入
在React Router中，动态导入常用于按需加载路由组件，优化页面加载速度。
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>
);
}错误边界处理
动态导入可能因网络问题失败，可以通过错误边界（Error Boundary）捕获并处理错误。
class ErrorBoundary extends React.Component {
state = { hasError: false };
static getDerivedStateFromError(error) {
return { hasError: true };
}
render() {
if (this.state.hasError) {
return <div>Error loading component.</div>;
}
return this.props.children;
}
}
function App() {
return (
<ErrorBoundary>
<Suspense fallback={<div>Loading...</div>}>
<DynamicComponent />
</Suspense>
</ErrorBoundary>
);
}动态导入非React组件
如果需要动态导入普通JavaScript模块（如工具函数），可以直接使用import()语法。
async function loadUtility() {
const utility = await import('./utility');
utility.doSomething();
}注意事项
React.lazy目前仅支持默认导出（Default Export），具名导出需手动映射到default。Suspense的fallback属性必须提供，否则可能抛出错误。- 动态导入的组件需通过构建工具（如Webpack）支持代码分割。
