react如何动态加载组件
动态加载组件的方法
React 提供了多种方式实现动态加载组件，以下是常见的几种方法：
使用 React.lazy 和 Suspense
React.lazy 是 React 官方推荐的动态加载组件方法，通常与 Suspense 配合使用。适用于 React 16.6 及以上版本。
import React, { Suspense } from 'react';
const DynamicComponent = React.lazy(() => import('./DynamicComponent'));
function App() {
return (
<div>
<Suspense fallback={<div>Loading...</div>}>
<DynamicComponent />
</Suspense>
</div>
);
}动态加载高阶组件
通过高阶组件封装动态加载逻辑，实现更灵活的加载方式。
import React, { useState, useEffect } from 'react';
function withDynamicImport(importFn) {
return function DynamicComponent(props) {
const [Component, setComponent] = useState(null);
useEffect(() => {
importFn().then(module => {
setComponent(() => module.default);
});
}, []);
return Component ? <Component {...props} /> : <div>Loading...</div>;
};
}
const DynamicButton = withDynamicImport(() => import('./Button'));按需加载路由组件
在 React Router 中实现路由级别的动态加载。
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import React, { Suspense } from 'react';
const Home = React.lazy(() => import('./Home'));
const About = React.lazy(() => import('./About'));
function App() {
return (
<Router>
<Suspense fallback={<div>Loading...</div>}>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
</Switch>
</Suspense>
</Router>
);
}动态加载非默认导出组件
当需要加载非默认导出的组件时，可以通过解构方式获取。
const { NonDefaultComponent } = React.lazy(() =>
import('./NonDefaultComponent').then(module => ({
default: () => module.NonDefaultComponent
}))
);错误边界处理
为动态加载组件添加错误边界处理，增强健壮性。
class ErrorBoundary extends React.Component {
state = { hasError: false };
static getDerivedStateFromError(error) {
return { hasError: true };
}
render() {
if (this.state.hasError) {
return <h1>Component failed to load</h1>;
}
return this.props.children;
}
}
function App() {
return (
<ErrorBoundary>
<Suspense fallback={<div>Loading...</div>}>
<DynamicComponent />
</Suspense>
</ErrorBoundary>
);
}Webpack 魔法注释
配合 Webpack 使用魔法注释为动态加载的组件命名。
const DynamicComponent = React.lazy(() =>
import(/* webpackChunkName: "dynamic-component" */ './DynamicComponent')
);这些方法可以根据具体场景选择使用，React.lazy 和 Suspense 是最常用的组合，适用于大多数现代 React 应用。对于更复杂的场景，可以考虑高阶组件或自定义加载逻辑。
