当前位置：首页 > 文章列表 > 文章 > 前端 > 手写虚拟DOM实现方法全解析

手写虚拟DOM实现方法全解析

2026-02-16 15:11:35 0浏览收藏

本文深入浅出地详解了手写虚拟DOM系统的核心实现原理，从用h函数构建描述UI的JS对象（VNode），到通过mount完成初次渲染并保留真实DOM引用，再到关键的patch diff算法——通过同层比较、标签判定、属性更新与子节点递归比对，精准识别最小变更并高效同步到真实DOM，最终封装出render/update响应式驱动机制；整套实现虽精简却完整，直击“声明式UI”与“最小化更新”两大本质，让读者在动手实践中真正理解React等现代前端框架背后的虚拟DOM思想精髓。

如何构建一个自己的、类似于React的虚拟DOM系统？

构建一个类似 React 的虚拟 DOM 系统，核心是理解“声明式 UI”和“高效的 DOM 更新机制”。关键在于：用 JavaScript 对象描述 UI（即虚拟 DOM），通过对比新旧对象找出最小变更，再应用到真实 DOM 上。下面带你一步步实现一个极简但完整的虚拟 DOM 系统。

1. 定义虚拟 DOM 节点结构

虚拟 DOM 本质是一个普通的 JS 对象，用来描述真实 DOM 的结构。我们约定每个 vnode 包含标签名、属性和子节点。

function h(tag, props, children) {
  return {
    tag,
    props: props || {},
    children: children || []
  };
}

比如 h('div', { id: 'app' }, [h('span', {}, ['Hello'])]) 就会生成一个描述 div#app > span 结构的树形对象。

2. 将虚拟 DOM 渲染为真实 DOM

需要一个函数把 vnode 转换成真实的 DOM 节点，并插入页面。

function mount(vnode, container) {
  const el = document.createElement(vnode.tag);
  
  // 设置属性
  Object.keys(vnode.props).forEach(key => {
    el[key] = vnode.props[key];
  });

  // 递归挂载子节点
  (vnode.children || []).forEach(child => {
    if (typeof child === 'string') {
      el.appendChild(document.createTextNode(child));
    } else {
      mount(child, el);
    }
  });

  container.appendChild(el);
  vnode.el = el; // 保留对真实节点的引用
}

这个过程叫做“初次渲染”，从根 vnode 开始递归创建 DOM 并挂载。

3. 实现 diff 算法：对比新旧 vnode

当数据变化时，会生成新的 vnode 树。我们需要比较新旧两棵树，找出差异并更新真实 DOM。

为了高效，通常采用“同层比较”策略（React 也这么做）：

如果标签不同，直接替换整个节点
如果标签相同，复用节点，只更新变化的属性和子节点
递归处理子节点

function patch(oldVNode, newVNode) {
  const el = (newVNode.el = oldVNode.el);

  if (oldVNode.tag !== newVNode.tag) {
    // 标签不同，替换整棵子树
    el.parentNode.replaceChild(
      mount(newVNode), el
    );
    return;
  }

  // 标签相同，更新属性
  const oldProps = oldVNode.props || {};
  const newProps = newVNode.props || {};
  Object.keys(newProps).forEach(key => {
    if (oldProps[key] !== newProps[key]) {
      el[key] = newProps[key];
    }
  });
  Object.keys(oldProps).forEach(key => {
    if (!(key in newProps)) {
      el[key] = null;
    }
  });

  // 比较子节点
  const oldChildren = oldVNode.children || [];
  const newChildren = newVNode.children || [];

  const commonLength = Math.min(oldChildren.length, newChildren.length);
  for (let i = 0; i

4. 组装成可响应的系统

最后，封装一个简单的“组件”更新流程：

let currentVNode = null;

function render(vnode, container) {
  if (!currentVNode) {
    // 初次渲染
    currentVNode = vnode;
    mount(vnode, container);
  } else {
    // 更新
    const prevVNode = currentVNode;
    currentVNode = vnode;
    patch(prevVNode, vnode);
  }
}

现在你可以这样使用：

const App = (count) => h('div', { id: 'app' }, [
  h('p', {}, [`Count: ${count}`]),
  h('button', { 
    onclick: () => update(++count) 
  }, ['+'])
]);

let count = 0;
const update = () => render(App(count), document.getElementById('root'));
update(); // 首次渲染

基本上就这些。虽然简化了很多细节（如 key 优化、事件代理、批量更新等），但已经涵盖了 React 虚拟 DOM 的核心思想：用 JS 对象描述 UI，通过 diff 找出最小变更，高效更新视图。不复杂但容易忽略的是，保持对真实 DOM 节点的引用和递归 patch 的边界控制。

好了，本文到此结束，带大家了解了《手写虚拟DOM实现方法全解析》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！