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

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

在 React 中，可以使用 React.lazy() 和 Suspense 实现组件的懒加载。React.lazy() 接收一个动态 import() 函数，返回一个懒加载组件；Suspense 则用于在组件加载过程中展示 fallback 内容（如加载指示器）。

示例代码如下：

import React, { Suspense, lazy } from 'react';

// 使用 lazy 动态导入组件
const LazyComponent = lazy(() => import('./LazyComponent'));

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

export default App;

解析：

• React.lazy() 只支持默认导出（default export），若目标模块使用命名导出，需创建中间模块或使用包装函数。
• Suspense 的 fallback 属性可接受任意 React 元素，用于在子组件尚未加载完成时显示占位内容。
• 此方法适用于代码分割（Code Splitting），能显著减少初始 bundle 体积，提升首屏加载性能。
• 注意：服务端渲染（SSR）场景下 React.lazy 不被支持，需结合其他方案（如 Loadable Components）。