React 为什么需要 Fiber 和时间切片,Vue 却没有引入同样的机制?
先理解原理和示例,再练习完整口述与追问。
回答要点
React 更新默认从触发组件开始自顶向下重新执行组件并 diff,组件树大时一次更新可能很重,所以需要 Fiber 把渲染拆成可中断的单元并按优先级调度。Vue 通过响应式系统精确知道哪个组件依赖了哪个数据,更新粒度是组件级,再配合编译期优化减少 diff,单次更新通常足够小,引入时间切片的收益不抵复杂度。
原理拆解
React 的 state 变化后,组件函数及其子树默认都会重新执行(除非 memo 跳过),它无法在运行时得知哪些子组件真正依赖了变化的数据。Fiber 把每个组件变成链表节点,渲染阶段可以在单元之间暂停,把主线程让给用户输入,高优先级更新还能打断低优先级渲染;提交阶段仍同步完成,保证 DOM 一致。
Vue 在渲染时收集依赖,数据变化只让依赖它的组件重新渲染;模板编译器还会标记静态节点和动态属性(PatchFlag、Block Tree),diff 时跳过静态部分。Vue 团队曾评估过时间切片,结论是在 Vue 的更新模型下,主要瓶颈不在 diff 本身,切片会增加调度开销。Vue 3.6 起提供的可选 Vapor Mode 更进一步,组件不再经过虚拟 DOM,直接编译为 DOM 操作。
示例与推演
一个页面有 1000 个组件,修改顶部计数器:React 若未做 memo,可能重新执行大量子组件,Concurrent 模式下会分片完成;Vue 只重新渲染引用了计数器的那个组件。若单个组件本身计算量极大,例如一次渲染 10 万行,两者都需要虚拟列表或拆分任务,时间切片无法替代算法优化。
易错点
不要说“Vue 没有异步更新”,Vue 也会把同一轮的修改合并到微任务中统一刷新;也不要说 Fiber 让总工作量变少,它改善的是响应性,总工作量可能略增。
参考回答可直接练习口述
React 的更新默认从状态所在组件向下重新执行和 diff,运行时不知道哪些子组件真正受影响,大树更新可能长时间占用主线程,所以引入 Fiber 把渲染拆成可中断单元,按优先级调度。Vue 通过响应式依赖追踪精确定位需要更新的组件,加上编译期的静态提升和 PatchFlag,单次更新粒度小,时间切片的收益不明显反而增加复杂度。两者遇到超大单组件渲染,仍然要靠虚拟列表等优化。