React Suspense 和 lazy 有什么作用？适合什么场景？

简化版

React.lazy 用来按需加载组件，Suspense 用来在组件加载或等待数据时显示 fallback。它们常用于路由级代码分割、较重组件延迟加载、并发渲染下的等待状态管理。面试要强调：Suspense 是边界，lazy 是一种会触发 suspend 的组件加载方式。

详细版

代码分割示例：

const AdminPage = lazy(() => import('./AdminPage'));

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

当 AdminPage 的 JS chunk 还没加载完成时，React 会显示 fallback；加载完成后再渲染真实组件。它适合减少首屏 bundle，但 fallback 设计、边界粒度和错误处理都要考虑。

完整版教学

一、lazy 解决组件代码按需加载

大型 React 应用如果把所有页面都打进首屏 bundle，用户第一次打开会下载很多暂时用不到的代码。 React.lazy 允许组件在真正渲染到时再加载。这就是前端性能优化里的代码分割。

const SettingsPage = lazy(() => import('./SettingsPage'));

假设首页核心代码 300KB，设置页 120KB。如果设置页不在首屏，把它拆出去，首屏可能只需先下载 300KB，而不是 420KB。这能改善首屏加载时间，但首次进入设置页时会多一次加载等待。

二、Suspense 是等待状态的 UI 边界

lazy 组件加载过程中会“挂起”渲染。 Suspense 提供一个边界，告诉 React：边界内没准备好时显示什么。这个显示内容就是 fallback。

<Suspense fallback={<Spinner />}>
  <SettingsPage />
</Suspense>

流程如下：

渲染 lazy 组件
  -> chunk 未加载完成
  -> 触发 suspend
  -> 最近的 Suspense 显示 fallback
  -> chunk 加载完成
  -> 渲染真实组件

没有 Suspense 包裹 lazy 组件，React 无法知道加载期间该展示什么。所以 lazy 和 Suspense 通常成对出现。

三、Suspense 边界粒度会影响用户体验

Suspense 可以包很大，也可以包很小。边界太大，局部组件加载会让整个页面变成 loading。边界太小，页面会出现很多零散 loading。

<Suspense fallback={<PageSkeleton />}>
  <Dashboard />
</Suspense>

<Suspense fallback={<ChartSkeleton />}>
  <HeavyChart />
</Suspense>

边界粒度	优点	风险
页面级	简单统一	小区域等待导致整页 loading
区块级	体验细腻	fallback 设计更复杂
组件级	控制精细	loading 过多、视觉跳动

一般路由页用页面级 skeleton，重图表或编辑器用区块级边界。

四、lazy 失败要配合错误边界

Suspense 负责等待，不负责兜住加载失败后的错误展示。如果动态 import 失败，比如网络断开或 chunk 404，需要错误边界处理。否则用户可能看到空白或应用错误。

<ErrorBoundary fallback={<div>加载失败，请刷新重试</div>}>
  <Suspense fallback={<div>加载中...</div>}>
    <AdminPage />
  </Suspense>
</ErrorBoundary>

等待中的 Promise 由 Suspense 处理。最终失败的错误由 Error Boundary 处理。这两个边界职责不同，面试里能讲清楚很加分。

五、Suspense 不只是 lazy，还和数据等待相关

在现代 React 生态里，Suspense 也可以用于数据等待。例如支持 Suspense 的框架或数据库可以让组件在数据未准备好时挂起。 React 的 use、服务端组件、支持 Suspense 的路由和数据层都围绕这个模型发展。

等待代码：
  lazy(import)
等待数据：
  Suspense-enabled data source
等待资源：
  framework integration

不过普通客户端 fetch 直接写在 useEffect 里，不会自动被 Suspense 捕获。所以面试时要避免说“Suspense 能自动处理所有请求 loading”。它需要配合支持 Suspense 的数据读取方式。

六、不要为了分割而过度 lazy

代码分割有收益，也有成本。拆得太细会增加请求数量、边界复杂度和加载闪烁。应该优先拆路由页、低频重组件、大型第三方依赖。

适合 lazy：
  后台管理页、图表编辑器、富文本编辑器、低频弹窗
不适合过度 lazy：
  首屏关键按钮、很小的基础组件、频繁出现的 UI 单元

记忆钩子：lazy 让代码晚点来，Suspense 告诉用户等待时看什么。

真实优化要结合 bundle 分析。如果一个组件只有 2KB，拆出去可能收益小于额外请求成本。

七、常见误区与追问

误区：Suspense 就是 loading 组件。 Suspense 是等待边界，fallback 只是等待期间显示的 UI。
误区：React.lazy 可以加载任意函数。 lazy 需要动态 import 返回默认导出的 React 组件。
误区：Suspense 会自动捕获加载失败。 Suspense 处理等待，错误展示要配合 Error Boundary。
追问：为什么路由级代码分割常用 lazy？ 路由页面天然按访问路径分块，能减少首屏不必要代码。
追问：fallback 设计要注意什么？ 尽量用 skeleton 或局部占位，避免整页闪烁和布局跳动。
追问：Suspense 能处理 useEffect 里的 fetch 吗？ 普通 Effect 请求不会自动挂起，需要支持 Suspense 的数据读取方案。

八、加强记忆

这题按“代码分割 + 等待边界”来答。lazy 把组件代码拆成异步 chunk，Suspense 在 chunk 或资源未准备好时显示 fallback；再补错误边界、边界粒度和不要过度拆分，就能覆盖主要高频追问。

简化版

详细版