虚拟DOM与diff算法原理全解析

编程并不是一个机械性的工作，而是需要有思考，有创新的工作，语法是固定的，但解决问题的思路则是依靠人的思维，这就需要我们坚持学习和更新自己的知识。今天golang学习网就整理分享《JavaScript虚拟DOM及diff算法原理详解》，文章讲解的知识点主要包括，如果你对文章方面的知识点感兴趣，就不要错过golang学习网，在这可以对大家的知识积累有所帮助，助力开发能力的提升。

虚拟 DOM 是用 JavaScript 对象模拟真实 DOM 的轻量层，避免频繁重排重绘，支持批量更新与跨平台；React.createElement 等返回虚拟 DOM 对象，diff 算法仅同层级同 type 比较，key 用于标识可复用节点，列表渲染须用稳定唯一 key。

虚拟 DOM 是什么，为什么需要它

虚拟 DOM 不是浏览器原生概念，而是用 JavaScript 对象模拟真实 DOM 节点的结构。它本身不渲染、不响应事件，只是一层轻量的数据描述。核心价值在于：避免直接操作真实 DOM 带来的频繁重排重绘开销；为批量更新和跨平台（如 SSR、小程序）提供中间抽象层。

关键点：React.createElement 返回的就是一个虚拟 DOM 对象（Plain Object），形如 { type: 'div', props: { className: 'box' }, children: [...] }。Vue 的 h()、Preact 的 h 函数同理。

diff 算法只在同层级比较，且默认不跨类型移动节点

主流实现（React 16+、Vue 3）采用「双端对比 + 最小编辑距离启发式」，但前提是：diff 严格限制在相同 type（标签名或组件类型）的节点之间进行。一旦 type 改变（比如 div → span），整棵子树被丢弃重建，不会尝试复用。

常见误解：以为 diff 会智能“移动”节点。实际上，key 的作用只是告诉算法：“这个节点在旧列表里叫 A，在新列表里还叫 A，可以复用其状态（如 input 光标、组件实例）”。没有 key 或 key 错乱，会导致无谓的销毁重建。

• 列表渲染必须用稳定唯一的 key，禁止用 index
• props 变化时，仅触发 shouldComponentUpdate 或 memo 判断，不等于跳过 diff
• 函数组件每次 render 都生成新虚拟 DOM 树，diff 发生在新旧两棵树之间

简化版 diff 过程：从根节点开始递归比对

真实框架逻辑复杂，但主干流程可概括为三步：① 比较节点类型；② 若类型相同，更新 props 和事件；③ 递归比对子节点（children）。子节点 diff 分为单节点和多节点两种路径：

单节点（如 div 下只有一个 p）：直接递归比对子节点对象。

多节点（如 ul 下有多个 li）：进入列表 diff，此时才用到 key。算法会先快速比对头尾四组（oldStart/newStart、oldEnd/newEnd、oldStart/newEnd、oldEnd/newStart），找到可复用项，再 fallback 到哈希映射查找。

function diff(oldNode, newNode, parentDOM) {
  if (!newNode) {
    parentDOM.removeChild(oldNode.el);
  } else if (!oldNode) {
    const el = createElement(newNode);
    parentDOM.appendChild(el);
  } else if (oldNode.type !== newNode.type) {
    // 类型不同，直接替换
    const el = createElement(newNode);
    parentDOM.replaceChild(el, oldNode.el);
  } else {
    // 类型相同，复用 DOM 节点，只更新 props & children
    updateElement(oldNode.el, oldNode.props, newNode.props);
    diffChildren(oldNode.children, newNode.children, oldNode.el);
  }
}

diff 不等于 patch，真实 DOM 更新发生在 commit 阶段

diff 只是计算出「需要做什么」（如「删除第 2 个子节点」「将第 1 个子节点的 className 改为 'active'」），这些操作被收集为 effect list。真正的 DOM 修改（patch）是在 commit 阶段统一执行的，且不可中断——这也是 React 18 并发模式要解决的问题之一。

容易忽略的细节：useEffect、useLayoutEffect 的执行时机就卡在 commit 后的不同阶段；服务端渲染（SSR）时，diff 在 Node.js 环境运行，没有真实 DOM，所以必须靠 hydrateRoot 在客户端做水合校验。

理论要掌握，实操不能落！以上关于《虚拟DOM与diff算法原理全解析》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！