React 性能优化

startTransition 和 useDeferredValue 如何改善 React 交互性能？

并发 API 让 React 表达更新优先级，但不会自动消除昂贵计算或网络延迟。

适合阶段：高级前端 / 资深前端核心能力：并发更新 · 优先级 · 输入响应

面试官想考什么

• 什么是紧急更新和 transition？ 考察并发模型。
• 输入框为什么不能都放进 transition？ 考察用户体验。
• useDeferredValue 和防抖有什么区别？ 考察工具边界。
• transition 仍然卡顿怎么办？ 考察完整排查。

一句话回答

startTransition 和 useDeferredValue 把非紧急 UI 更新标记为可延后的工作，让输入和点击反馈优先，但昂贵计算、网络和 DOM 数量问题仍需单独优化。

面试回答详解

1. 更新优先级

• 紧急更新：输入回显、按钮反馈、焦点和关闭弹窗。
• 非紧急更新：大列表筛选、图表切换、搜索结果和复杂预览。

用户输入 -> 立即更新输入框
         -> transition/deferred 更新结果区域

2. 两个 API 的区别

• startTransition：把代码块中的 state 更新标记为 transition。
• useDeferredValue：让某个值的消费者可以稍后跟上新值。
• 防抖：控制事件触发频率；transition：表达渲染优先级，二者可配合但不是同一件事。

3. 边界

transition 渲染可以被中断和重做，因此 render 必须纯，外部数据源要避免 tearing。它不能让同步 CPU 计算变快，也不能替代请求取消和虚拟列表。

4. 生产实践

给延迟区域提供 pending 反馈，防止旧结果和新输入混淆；用 Profiler 和 Performance 验证主线程是否真的被让出。

可直接背诵的 30 秒回答

我会把输入回显、点击和焦点这类紧急更新保持同步，把大列表筛选、图表和搜索结果放进 startTransition，或者让结果消费 useDeferredValue。它和防抖的目标不同，前者是 React 更新优先级，后者是减少触发次数。若仍然卡顿，我会继续检查计算、DOM、网络和长任务，因为 transition 不会自动降低这些成本。

扩展知识

交互优化组合

立即反馈 -> transition/deferred -> 请求取消
-> 虚拟化/缓存 -> Worker/服务端计算 -> RUM 验证

面试官追问链

追问一：防抖能替代 startTransition 吗？

• 考察点：是否混淆事件频率和渲染优先级。
• 回答方向：不能。防抖减少请求或计算触发，transition 让已经发生的 React 更新让路。

追问二：为什么输入框不能放进 transition？

• 考察点：是否理解紧急反馈。
• 回答方向：输入回显需要立即更新，否则会出现延迟和丢失感；应只延后结果区域。

追问三：transition 中请求失败怎么处理？

• 考察点：异步 UX。
• 回答方向：请求层处理取消、错误和重试，UI 用 pending/旧数据/错误状态表达，避免把旧结果误当成新结果。

推荐阅读

• React useTransition
• React useDeferredValue
• React 性能优化