《React Suspense 边界触发机制与实战用法》

标签：#前端 #React #Suspense #LazyLoading #StreamingRendering #ViewTransition

总结：
React Suspense 边界在组件树中充当"加载守门员"，当子组件通过 lazy 懒加载、用 use 读取 Promise、或加载带 precedence 的样式表时，边界会优雅地切换到 fallback UI。它与流式服务端渲染、ViewTransition 动画深度整合，还能配合 startTransition 避免已显示内容被强制替换，让加载体验从"闪屏"变成"渐进式揭晓"。

文章要点：
1. Suspense 不是万能检测器，它只捕获渲染阶段的挂起行为——Effect 或事件里的数据请求不会触发边界，得用 use 读取 Promise 或框架封装才行
2. 七大触发场景一览：懒加载组件代码、Promise 数据读取、带 precedence 的样式表、流式 SSR 的大块 HTML、ViewTransition 期间的字体与图片加载、以及实验性的 defer CPU 密集型渲染
3. 嵌套边界能打造"加载阶梯"：外层骨架屏先撑住，内层内容逐层揭晓，避免整页白屏，还能让设计师的 loading 状态稿直接落地
4. startTransition 是保屏神器：导航更新时标记为非紧急，React 会"忍一忍"新内容的挂起，不让已显示的 Layout 被 fallback 粗暴顶掉
5. 配合 key 重置边界：切到不同用户资料时，给边界加 key 能让 React 识别为新内容，自动清掉旧状态，避免"张冠李戴"的残留显示
6. 服务端容错兜底：流式 SSR 里组件抛错不会崩掉整个渲染，React 会找到最近的 Suspense 边界，把 fallback 塞进 HTML，客户端再尝试 hydrate
7. 资源协调全家桶：ViewTransition 动画期间，Suspense 能同时等待数据、样式、字体、图片全部就位，让过渡动画开场就是完整画面，告别"先丑后美"的闪烁

URL：https://react.dev/reference/react/Suspense#what-activates-a-suspense-boundary

react.dev

Suspense – React

The library for web and native user interfaces