← 中文资源

简体中文版本

虚拟 DOM

虚拟 DOM 以轻量的程序化对象树作为期望 UI 的真值来源,与上一快照做 diff,只把最小补丁应用到真实 DOM 上。

阅读英文原文

概念定义

直接命令式的 DOM 更新会把变更散落各处并造成冗余工作。虚拟 DOM 集中表达期望的最终状态:构建新描述、diff 新旧、一次性提交真实变更,DOM 由一致状态迁移到一致状态。目的是批量并最小化相对昂贵的 DOM 变异。

工作机制

协调过程遍历两棵树,比较元素类型与 key:类型变化替换子树,key 让重排后状态跟随条目。补丁在提交阶段应用,常在单任务或微任务冲刷中批处理。不同库的调度各异:同步冲刷、时间切片或并发过渡。

使用场景

声明式且条件结构复杂的 UI、浏览器之外的跨端渲染目标、需要通往命令式节点逃生舱的框架。在更新密集的数字仪表盘上,细粒度响应式往往因只触碰受影响绑定而胜出。

常见误区

虚拟 DOM 不是“比 DOM 快”,而是批处理与调度策略;每次按键都重渲染整棵组件树照样慢。diff 本身消耗与树规模成正比的 CPU,memo 化与组件边界比抽象本身更关键。数组索充当 key 是经典静默 bug:重排后状态挂到错误条目上。