React 中如何使用 React.lazy 和 Suspense 进行代码分割？

推荐答案

// www.javascriptcn.com code example
import React, { Suspense } from 'react';

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

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

export default App;

本题详细解读

1. 什么是 React.lazy 和 Suspense？

• React.lazy: 是 React 提供的一个函数，用于动态加载组件。它允许你将组件的导入包装在一个懒加载函数中，从而实现代码分割。React.lazy 接受一个函数作为参数，该函数返回一个 import() 动态导入的 Promise。

• Suspense: 是 React 提供的一个组件，用于在懒加载组件加载过程中显示一个备用内容（通常是加载指示器）。Suspense 组件通过 fallback 属性指定在加载过程中显示的内容。

2. 如何使用 React.lazy 和 Suspense？

1. 使用 React.lazy 动态导入组件:

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

   这里，LazyComponent 是一个懒加载的组件，只有在需要时才会被加载。

2. 使用 Suspense 包裹懒加载组件:

   <Suspense fallback={<div>Loading...</div>}>
     <LazyComponent />
   </Suspense>

   Suspense 组件包裹了 LazyComponent，并提供了一个 fallback 属性，用于在组件加载过程中显示加载指示器。

3. 注意事项

• React.lazy 只支持默认导出（default export）的组件。如果你需要懒加载一个命名导出的组件，可以使用中间模块来重新导出。

• Suspense 目前仅支持懒加载组件。对于数据获取等场景，React 正在开发更广泛的 Suspense 支持。

• 错误处理：如果懒加载组件加载失败，可以使用 Error Boundary 来捕获并处理错误。

4. 示例代码

// www.javascriptcn.com code example
import React, { Suspense } from 'react';

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

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

export default App;

在这个示例中，LazyComponent 只有在 App 组件渲染时才会被加载，并且在加载过程中会显示 Loading...。