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 应用。对于更复杂的场景，可以考虑高阶组件或自定义加载逻辑。