当前位置：首页 > React

react如何动态导入组件

2026-01-24 14:28:54React

动态导入组件的方法

React 支持通过动态导入（Dynamic Import）实现组件的按需加载，通常用于代码分割或懒加载场景。以下是几种常见实现方式：

使用 `React.lazy` 和 `Suspense`

React.lazy 是 React 官方提供的动态导入方法，需配合 Suspense 组件处理加载状态：

import React, { Suspense } from 'react';

const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

注意：

仅支持默认导出（default export）的组件。
Suspense 的 fallback 属性用于显示加载中的占位内容。

动态导入结合高阶组件

若需自定义加载逻辑或处理命名导出（named export），可通过高阶组件实现：

import React, { useState, useEffect } from 'react';

function withLazyLoading(importFn, componentName = 'default') {
  return function WrappedComponent(props) {
    const [Component, setComponent] = useState(null);

    useEffect(() => {
      importFn().then(module => {
        setComponent(module[componentName]);
      });
    }, []);

    return Component ? <Component {...props} /> : <div>Loading...</div>;
  };
}

// 使用示例（假设组件是命名导出）
const LazyButton = withLazyLoading(
  () => import('./LazyButton').then(module => ({ default: module.Button })),
);

动态导入路由组件

在 React Router 中实现路由级懒加载：

import { BrowserRouter as Router, Route, Routes } 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>}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
        </Routes>
      </Suspense>
    </Router>
  );
}

动态导入的 Webpack 魔法注释

通过 Webpack 的魔法注释（Magic Comments）可进一步控制代码分割行为：

const LazyComponent = React.lazy(() =>
  import(/* webpackChunkName: "lazy-component" */ './LazyComponent'),
);

常用注释：

webpackChunkName：指定生成的 chunk 名称。
webpackPrefetch: true：预加载资源。

错误边界处理

为动态导入组件添加错误边界（Error Boundary）以捕获加载失败：

react如何动态导入组件

class ErrorBoundary extends React.Component {
  state = { hasError: false };

  static getDerivedStateFromError() {
    return { hasError: true };
  }

  render() {
    if (this.state.hasError) {
      return <div>Failed to load component.</div>;
    }
    return this.props.children;
  }
}

// 使用示例
<ErrorBoundary>
  <Suspense fallback={<div>Loading...</div>}>
    <LazyComponent />
  </Suspense>
</ErrorBoundary>