使用JavaScript实现一个简单的虚拟DOM_javascript框架原理-js教程-PHP中文网

使用JavaScript实现一个简单的虚拟DOM_javascript框架原理

betcha

发布： 2025-10-30 18:59:16

原创

944人浏览过

虚拟DOM通过JS对象描述DOM结构，利用h函数创建VNode，render函数生成真实DOM，patch函数对比新旧节点实现最小化更新，提升频繁UI操作的性能。

使用javascript实现一个简单的虚拟dom_javascript框架原理

虚拟DOM的核心思想是用JavaScript对象来描述真实DOM结构，通过对比新旧虚拟DOM的差异，最小化地更新真实DOM。这种方式能显著提升页面性能，尤其是在频繁操作UI的场景下。下面是一个极简的虚拟DOM实现，帮助理解其基本原理。

1. 创建虚拟节点（VNode）

每个虚拟节点代表一个真实的DOM元素。我们用一个函数来创建这些节点：

function h(tag, props, children) {
  return {
    tag,
    props,
    children: Array.isArray(children) ? children : [children]
  };
}

登录后复制

这个h函数接收标签名、属性对象和子元素列表，返回一个描述DOM结构的JS对象。例如：

const vnode = h('div', { id: 'app' }, [
  h('h1', {}, 'Hello Virtual DOM'),
  h('p', {}, 'This is a simple implementation.')
]);

登录后复制

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

需要一个函数把虚拟节点转换成真实的DOM节点：

立即学习“Java免费学习笔记（深入）”；

function render(vnode, container) {
  const el = document.createElement(vnode.tag);

  // 设置属性
  if (vnode.props) {
    Object.keys(vnode.props).forEach(key => {
      el[key] = vnode.props[key];
    });
  }

  // 递归渲染子节点
  if (vnode.children) {
    vnode.children.forEach(child => {
      if (typeof child === 'string') {
        el.appendChild(document.createTextNode(child));
      } else {
        render(child, el);
      }
    });
  }

  container.appendChild(el);
}

登录后复制

调用render(vnode, document.body)就可以把虚拟结构插入页面。

标贝AI虚拟主播

一站式虚拟主播视频生产和编辑平台

查看详情

3. 比较新旧虚拟DOM（Diff算法简化版）

当数据变化时，生成新的虚拟DOM，然后与旧的对比，找出差异进行局部更新：

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

  if (newVNode.tag !== oldVNode.tag) {
    // 标签不同，直接替换
    el.parentNode.replaceChild(createElement(newVNode), el);
  } else {
    // 相同标签，更新属性和子节点
    updateProps(el, newVNode.props, oldVNode.props);
    updateChildren(el, oldVNode.children, newVNode.children);
  }
}

function createElement(vnode) {
  if (typeof vnode === 'string') {
    return document.createTextNode(vnode);
  }

  const el = document.createElement(vnode.tag);
  if (vnode.props) {
    Object.keys(vnode.props).forEach(key => {
      el[key] = vnode.props[key];
    });
  }

  if (vnode.children) {
    vnode.children.forEach(child => {
      el.appendChild(createElement(child));
    });
  }

  vnode.el = el; // 缓存真实DOM引用
  return el;
}

function updateProps(el, newProps = {}, oldProps = {}) {
  // 移除旧的或变更的属性
  Object.keys(oldProps).forEach(key => {
    if (!newProps[key]) {
      el[key] = '';
    }
  });

  // 添加新的属性
  Object.keys(newProps).forEach(key => {
    if (oldProps[key] !== newProps[key]) {
      el[key] = newProps[key];
    }
  });
}

function updateChildren(parent, oldChildren = [], newChildren = []) {
  const max = Math.max(oldChildren.length, newChildren.length);

  for (let i = 0; i < max; i++) {
    const oldChild = oldChildren[i];
    const newChild = newChildren[i];

    if (!oldChild) {
      parent.appendChild(createElement(newChild));
    } else if (!newChild) {
      parent.removeChild(oldChild.el);
    } else {
      patch(oldChild, newChild);
    }
  }
}

登录后复制

4. 使用示例

组合以上功能，可以构建一个简单的响应式更新流程：

// 初始虚拟DOM
let oldVNode = h('div', { id: 'counter' }, [
  h('span', {}, 'Count: 0')
]);

// 渲染到页面
render(oldVNode, document.body);

// 模拟更新
setTimeout(() => {
  const newVNode = h('div', { id: 'counter' }, [
    h('span', {}, 'Count: 1')
  ]);
  patch(oldVNode, newVNode);
  oldVNode = newVNode;
}, 1000);

登录后复制

基本上就这些。这个实现省略了key优化、事件处理等复杂细节，但清晰展示了虚拟DOM从创建、渲染到更新的核心流程。不复杂但容易忽略的是：保持对真实DOM的引用、递归对比子树、最小化操作真实DOM。

以上就是使用JavaScript实现一个简单的虚拟DOM_javascript框架原理的详细内容，更多请关注php中文网其它相关文章！