如何在 React 中实现组件的懒加载（Lazy Loading）？

如何在 React 中实现组件的懒加载（Lazy Loading）？

回答：
在 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() 接收一个函数，该函数必须调用动态 import() 并返回一个 Promise。该 Promise 解析后应导出一个默认组件。
• Suspense 组件包裹懒加载的组件，并通过 fallback 属性指定加载期间显示的内容。
• 懒加载有助于减少初始 bundle 体积，提升应用首屏加载速度，特别适用于路由级组件或大型功能模块。
• 注意：React.lazy() 目前仅支持默认导出（default export），若需懒加载具名导出组件，需创建中间模块进行默认导出包装。