Quartz 4

cv：Suspense和lazy的实现原理

6 min read

React 中的 <Suspense /> 和 React.lazy() 实现原理

1. <Suspense /> 组件原理

<Suspense /> 是 React 提供的一个组件，用于处理组件懒加载时的加载状态（loading 状态）。它允许在组件异步加载时显示备用内容，直到组件加载完成。

工作原理
  • 当一个子组件是异步加载时（如通过 React.lazy() 或异步数据请求），React 会在渲染该组件时暂停渲染，直到异步加载完成。
  • React 使用 Promise 跟踪异步操作。当 Promise 完成时，React 会重新渲染组件并显示最终内容。
  • <Suspense /> 的 fallback 属性用于提供在加载期间显示的占位内容（例如 loading 指示器）。
流程
  1. 当异步加载的子组件被渲染时，React 会创建一个挂起（suspended）状态。
  2. 挂起状态会触发 <Suspense /> 的 fallback 内容展示，直到异步操作完成。
  3. 一旦异步操作（如 import()）完成，React 会重新渲染并显示最终的内容。
示例代码
import React, { Suspense, lazy } from 'react';
 
// 懒加载组件
const LazyComponent = lazy(() => import('./LazyComponent'));
 
function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </Suspense>
  );
}
 
export default App;
  • LazyComponent 是懒加载的组件，只有在需要渲染时才会异步加载。
  • Suspense 提供了 fallback 属性，在加载过程中显示 "Loading..." 文本。

2. React.lazy() 原理

React.lazy() 是 React 提供的一个 API，用于实现组件懒加载。它通过动态导入（import()）来延迟加载组件，只有在需要渲染时才会去加载组件。

工作原理
  • React.lazy() 接受一个函数，该函数返回一个动态的 import() 语句，该语句返回一个 Promise，用于加载目标组件。
  • import() 是异步操作，只有在组件需要渲染时，React 才会去加载它。
示例代码
import React, { Suspense, lazy } from 'react';
 
// 懒加载组件
const LazyComponent = lazy(() => import('./LazyComponent'));
 
function App() {
  return (
    <div>
      <h1>React Lazy Loading Example</h1>
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}
 
export default App;
  • React.lazy() 返回一个懒加载组件，只有当该组件在视图中需要渲染时，React 才会异步加载它。

3. 底层实现原理

异步导入和 import() 机制
  • React.lazy() 基于 JavaScript 的 import() 语法，它返回一个 Promise，用于动态加载模块。
  • Promise 解决后，React 会触发组件的渲染。
Suspense 和 Fiber 架构
  • Fiber 架构：React 使用 Fiber 架构来管理组件的渲染。在 Fiber 中，每个任务都有一个状态，React 会判断该任务是否在异步等待中。如果任务依赖异步加载，React 会挂起任务，直到异步操作完成。
  • 挂起状态：当异步组件正在加载时，React 会将其挂起，直到加载完成才继续执行渲染。
  • 调度机制：Suspense 会通过 Fiber 的调度机制来决定何时渲染组件，并根据异步加载的状态触发更新。

4. 使用场景与优化

  • 代码分割：懒加载结合 Suspense 可以实现代码分割，减少初始加载时的资源请求，提升性能。
  • UI 不阻塞：通过 Suspense 提供的 fallback 内容，用户界面在组件加载期间不会被阻塞，提升用户体验。
  • 提高首屏渲染速度：通过懒加载，只加载当前页面所需的模块，减少不必要的资源加载，加快首屏渲染速度。

5. 高级用法与扩展

  • 数据加载与 Suspense：Suspense 不仅可以用于懒加载组件，也可以用于异步数据加载（例如与 React Query 或 Relay 结合使用）。在数据加载期间，Suspense 会展示一个加载指示器，直到数据加载完成。
  • 嵌套 Suspense：可以在多个地方嵌套使用 Suspense，例如在多个懒加载组件中使用不同的加载指示器。
  • 错误边界：与 Suspense 一起使用时，可以通过 ErrorBoundary 组件来捕获加载失败的错误，并显示自定义错误信息。

6. 小结

  • React.lazy()：用于组件懒加载，通过 import() 动态加载组件，只有在需要渲染时才加载。
  • <Suspense />：用于处理异步操作的加载状态，提供占位内容，直到异步操作完成并渲染最终组件。

通过结合使用 React.lazy() 和 <Suspense />，可以实现高效的代码分割和流畅的用户体验，在性能和用户体验之间取得良好的平衡。

Graph View