当前位置：首页 > React

react如何异步加载

2026-01-23 17:07:20React

React 异步加载的实现方法

使用动态导入（Dynamic Import）结合 React.lazy 和 Suspense

动态导入是 ECMAScript 的特性，允许异步加载模块。React 提供了 React.lazy 函数，可以懒加载组件。

import React, { Suspense } from 'react';

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

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

Suspense 组件用于在异步组件加载时显示备用内容（如加载动画）。

自定义高阶组件（HOC）实现异步加载

react如何异步加载

可以封装一个高阶组件来处理异步加载逻辑，适用于需要更细粒度控制的场景。

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

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

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

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

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

使用第三方库如 loadable-components

@loadable/component 是社区流行的异步加载解决方案，支持服务端渲染（SSR）和更复杂的场景。

react如何异步加载

import loadable from '@loadable/component';

const AsyncComponent = loadable(() => import('./AsyncComponent'), {
  fallback: <div>Loading...</div>,
});

function App() {
  return <AsyncComponent />;
}

路由级别的异步加载（React Router）

在 React Router 中结合 React.lazy 实现路由级别的代码分割。

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

注意事项