如何在 React 中实现组件的懒加载（Lazy Loading）并配合 Suspense 使用？

如何在 React 中实现组件的懒加载（Lazy Loading）并配合 Suspense 使用？

回答：
在 React 中，可以使用 React.lazy() 和 Suspense 实现组件的懒加载。React.lazy() 允许你动态导入组件，使其在首次渲染时才加载对应的代码，从而减少初始包体积。Suspense 则用于在组件加载过程中显示 fallback 内容（如加载指示器）。

示例代码如下：

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

// 懒加载组件
const LazyComponent = lazy(() => import('./LazyComponent'));

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

export default App;

解析：

• React.lazy() 接收一个返回 Promise 的函数，通常是动态 import() 语句。
• 懒加载的组件必须是默认导出（default export）。
• Suspense 的 fallback 属性用于指定加载期间显示的内容，可以是任何 React 元素。
• 该模式适用于路由级代码分割（如配合 React Router）或大型 UI 模块的按需加载，有助于提升应用的初始加载性能。
• 注意：React.lazy 与 Suspense 目前仅支持客户端渲染，不适用于 SSR（服务端渲染），若需在 SSR 环境中实现类似功能，可考虑使用 loadable-components 等第三方库。