当前位置：首页 > React

react如何异步加载

2026-02-11 21:08:52React

异步加载的实现方法

React中实现异步加载通常使用React.lazy和Suspense组合，这是React官方推荐的代码分割方案。这种方式能有效减少初始加载时的资源体积。

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

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

动态导入语法

Webpack等打包工具支持动态import()语法，这是实现异步加载的基础。动态导入返回一个Promise，解析后得到模块内容。

import('./module').then(module => {
  console.log(module.default);
});

路由级代码分割

在React Router中可以实现路由级别的代码分割，每个路由对应的组件按需加载。

const Home = React.lazy(() => import('./routes/Home'));
const About = React.lazy(() => import('./routes/About'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Suspense>
  );
}

预加载策略

为了提高用户体验，可以在空闲时预加载可能用到的组件。React自身不提供预加载API，但可以手动实现。

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

// 在需要预加载的地方
const preloadAbout = () => {
  import('./About');
};

错误边界处理

异步加载可能失败，需要错误边界来捕获并处理错误。

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

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

  render() {
    if (this.state.hasError) {
      return <h1>加载失败</h1>;
    }
    return this.props.children;
  }
}

自定义加载逻辑

对于更复杂的场景，可以自行管理加载状态。

function AsyncComponent({ loader, loading }) {
  const [Component, setComponent] = useState(null);

  useEffect(() => {
    loader().then(comp => {
      setComponent(comp);
    });
  }, [loader]);

  return Component ? <Component.default /> : loading;
}

第三方库方案

一些第三方库如loadable-components提供了更丰富的异步加载功能。

react如何异步加载

import loadable from '@loadable/component';

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

每种方法都有适用场景，应根据具体需求选择最合适的实现方式。路由级代码分割适合大型应用，而简单组件则可以直接使用React.lazy。预加载策略能提升用户体验，错误边界则保证应用健壮性。