当前位置：首页 > React

react如何延迟加载

2026-02-11 20:51:29React

延迟加载的实现方法

React中实现延迟加载（Lazy Loading）主要通过React.lazy和Suspense组件完成，用于动态导入组件并优化性能。

使用React.lazy动态导入组件

React.lazy允许动态导入组件，语法如下：

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

此方法会将组件打包成单独的代码块，仅在需要时加载。

配合Suspense处理加载状态

Suspense用于包裹延迟加载的组件，提供加载中的回退UI：

import React, { Suspense } from 'react';

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

fallback属性接受任何React元素，在组件加载期间显示。

路由级别的延迟加载

结合React Router实现路由级懒加载：

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';

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

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

命名导出组件的处理

若组件使用命名导出，需通过中间模块转换：

// MyComponent.js
export const MyComponent = () => <div>Content</div>;

// 使用中间模块
// IntermediateComponent.js
export { MyComponent as default } from './MyComponent';

// 延迟加载
const MyComponent = React.lazy(() => import('./IntermediateComponent'));

预加载策略

通过事件触发预加载，提升用户体验：

react如何延迟加载

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

function App() {
  const [show, setShow] = useState(false);

  const handleMouseOver = () => {
    import('./MyComponent');
  };

  return (
    <div onMouseOver={handleMouseOver}>
      <button onClick={() => setShow(true)}>Show</button>
      {show && (
        <Suspense fallback={<div>Loading...</div>}>
          <MyComponent />
        </Suspense>
      )}
    </div>
  );
}