useTransition、useDeferredValue 解决什么?
先理解原理和示例,再练习完整口述与追问。
回答要点
区分紧急与可延后的更新,减轻昂贵渲染对交互的影响。transition 不会把同步计算自动丢到后台线程;受控输入的直接更新不能当作 transition。deferred value 也不是带固定等待时间的防抖。
原理拆解
Transition 用于把可延后的 UI 更新标为非紧急,让输入等紧急更新更有机会先响应;useDeferredValue 让某个派生消费值可以暂时落后于最新输入。它们调整渲染优先级,不减少接口请求次数,不自动搬走 CPU 计算,也不保证某个延迟毫秒数。可中断和重试的 render 更要求计算纯净。
示例与推演
搜索输入 value 立即更新,昂贵结果区可以使用 deferredQuery 展示前一份结果并标记正在更新;后端请求仍需要单独防抖、取消和请求版本。tab 切换中非紧急的大内容更新可放 startTransition,但长达数百毫秒的单个同步函数仍会阻塞,应先拆分或减少工作。
易错点
受控输入本身不能为了过渡而滞后。async 过程跨 await 的标记行为与 React 版本有关,不能把某个版本示例当所有版本统一契约。
参考回答可直接练习口述
useTransition 让部分更新作为可中断的非紧急渲染处理,useDeferredValue 让界面的一部分暂时沿用旧值、延后处理新值。它们主要改善调度,不会自动减少网络请求,也不会把重计算放进 Worker。输入本身必须及时更新,可以延后昂贵结果列表。需要固定等待或限制请求频率仍用防抖或请求层。
面试官可能继续问追问与完整解答展开收起
追问
搜索输入怎样保持流畅?接口请求数量会自动减少吗?异步 action 的支持和 await 后的更新约束如何按版本确认?React 官方 useTransition
追问回答
搜索时即时更新输入,用 deferred value 或 transition 管理昂贵结果展示,网络节流另外做。React18 的 transition 回调以同步更新标记为主;React19 支持异步 action,但当前文档仍要求 await 后需标为 transition 的 setter 再包 startTransition。异步请求完成顺序仍要自己管理,不能认为 transition 自动消除竞争。