当前位置：首页 > React

react如何动态加载组件

2026-03-31 16:56:04React

动态加载组件的方法

在React中动态加载组件通常使用React.lazy和Suspense来实现代码分割和懒加载。这种方法能优化应用性能，减少初始加载时间。

使用React.lazy和Suspense

React.lazy函数允许动态导入组件，Suspense用于在组件加载过程中显示回退内容。

import React, { Suspense } from 'react';

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

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

动态导入带命名导出的组件

如果需要导入的组件是命名导出，可以结合React.lazy和动态导入的语法。

const { OtherComponent } = React.lazy(() =>
  import('./OtherComponent').then(module => ({ default: module.OtherComponent }))
);

错误边界处理

动态加载组件可能会失败，可以使用错误边界捕获并处理错误。

import React from 'react';

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;
  }
}

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

function MyComponent() {
  return (
    <ErrorBoundary>
      <Suspense fallback={<div>Loading...</div>}>
        <OtherComponent />
      </Suspense>
    </ErrorBoundary>
  );
}

动态加载基于条件的组件

可以根据条件动态加载不同的组件。

const DynamicComponent = React.lazy(() => {
  if (condition) {
    return import('./ComponentA');
  } else {
    return import('./ComponentB');
  }
});

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

使用高阶组件动态加载

可以创建一个高阶组件来封装动态加载逻辑。

react如何动态加载组件

function withLazyLoading(importComponent) {
  const LazyComponent = React.lazy(importComponent);
  return function (props) {
    return (
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent {...props} />
      </Suspense>
    );
  };
}

const OtherComponent = withLazyLoading(() => import('./OtherComponent'));

function MyComponent() {
  return <OtherComponent />;
}