如何在 React 中实现组件的懒加载（Lazy Loading）并配合 Suspense 处理加载状态？

如何在 React 中实现组件的懒加载（Lazy Loading）并配合 Suspense 处理加载状态？

回答：
在 React 中，可以使用 React.lazy() 和 Suspense 来实现组件的懒加载。具体步骤如下：

1. 使用 React.lazy() 动态导入组件：

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

2. 在 JSX 中将懒加载的组件包裹在 Suspense 组件内，并提供 fallback（加载期间显示的内容）：

import { Suspense } from 'react';

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

解析：

• React.lazy() 接收一个函数，该函数必须调用动态 import() 并返回一个 Promise，Promise resolve 的结果必须是一个默认导出（default export）的 React 组件。
• Suspense 用于在组件加载完成前显示 fallback 内容（如加载动画、文字等），提升用户体验。
• 此方案适用于代码分割（Code Splitting），可显著减少初始 bundle 体积，加快首屏加载速度。
• 注意：React.lazy 仅支持默认导出。若需懒加载具名导出的组件，需创建一个中间模块进行默认导出，或使用自定义封装。
• 该特性需配合支持动态 import() 的打包工具（如 Webpack、Vite 等）使用。