Vue-React为何要虚拟DOM

{
  tag: 'div',
  attrs: { id: 'app' },
  children: ['Hello']
}

// 定义一个虚拟DOM节点类
class VNode {
  constructor(tag, attrs, children) {
    this.tag = tag;
    this.attrs = attrs || {};
    this.children = children || [];
  }
}

// 创建一个简单的虚拟DOM树，代表 <div id="container"><p>Hello</p></div>
const virtualDOM = new VNode('div', { id: 'container' }, [
  new VNode('p', {}, ['Hello'])
]);

// 假设数据变化，我们需要更新文本内容
const newData = 'World';
const newVirtualDOM = new VNode('div', { id: 'container' }, [
  new VNode('p', {}, [newData])
]);

// 伪代码：比较两个虚拟DOM节点
function diff(oldVNode, newVNode) {
  // 1. 如果标签不同，直接替换整个节点
  if (oldVNode.tag !== newVNode.tag) {
    return { type: 'REPLACE', newNode: newVNode };
  }

  // 2. 如果标签相同，比较属性
  const attrsDiff = compareAttrs(oldVNode.attrs, newVNode.attrs);

  // 3. 比较子节点（这里简化处理，假设子节点数量相同）
  const childrenDiff = [];
  for (let i = 0; i < oldVNode.children.length; i++) {
    childrenDiff.push(diff(oldVNode.children[i], newVNode.children[i]));
  }

  return { type: 'UPDATE', attrs: attrsDiff, children: childrenDiff };
}

function compareAttrs(oldAttrs, newAttrs) {
  // 找出新增、修改、删除的属性
  const diff = {};
  for (const key in newAttrs) {
    if (oldAttrs[key] !== newAttrs[key]) {
      diff[key] = newAttrs[key];
    }
  }
  return diff;
}

// 伪代码：根据diff结果更新真实DOM
function patch(realDOM, diffResult) {
  if (diffResult.type === 'REPLACE') {
    // 替换整个元素
    realDOM.parentNode.replaceChild(createRealDOM(diffResult.newNode), realDOM);
  } else if (diffResult.type === 'UPDATE') {
    // 更新属性
    for (const key in diffResult.attrs) {
      realDOM.setAttribute(key, diffResult.attrs[key]);
    }
    // 递归更新子节点
    diffResult.children.forEach((childDiff, index) => {
      patch(realDOM.children[index], childDiff);
    });
  }
}