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）支持代码分割。