react如何实现组件异步加载

实现 React 组件异步加载的方法

使用 React.lazy 和 Suspense

React.lazy 是 React 官方提供的异步加载组件的方法，需要与 Suspense 配合使用。React.lazy 接受一个返回动态 import() 的函数，返回一个 Promise。

import React, { Suspense } from 'react';

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

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

Suspense 的 fallback 属性用于在组件加载期间显示加载状态。

自定义高阶组件

可以创建一个高阶组件（HOC）来封装异步加载逻辑，适用于需要更复杂控制的情况。

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

function asyncComponent(importComponent) {
  return function(props) {
    const [Component, setComponent] = useState(null);

    useEffect(() => {
      importComponent().then(cmp => {
        setComponent(cmp.default || cmp);
      });
    }, []);

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

const AsyncComponent = asyncComponent(() => import('./AsyncComponent'));

结合路由的异步加载

在 React Router 中实现路由级别的异步加载，可以优化页面切换性能。

import { BrowserRouter as Router, Route, Switch } 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>}>
        <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 };
  }

  componentDidCatch(error, info) {
    console.error(error, info);
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

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

动态导入的命名导出

如果组件是命名导出而非默认导出，需要稍微调整导入方式。

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

预加载策略

可以在用户可能访问组件前预先加载，例如在鼠标悬停时触发加载。

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

function PreloadComponent() {
  const [loaded, setLoaded] = useState(false);

  const preload = () => {
    import('./AsyncComponent');
    setLoaded(true);
  };

  return (
    <div onMouseEnter={preload}>
      {loaded ? (
        <Suspense fallback={<div>Loading...</div>}>
          <AsyncComponent />
        </Suspense>
      ) : (
        <div>Hover to load</div>
      )}
    </div>
  );
}