虚拟DOM原理及JS实现详解

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

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

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);
}

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 

// 初始虚拟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);