实现一个高效的虚拟DOM Diff算法

65 阅读1分钟
function diff(oldVNode, newVNode) {
  if (oldVNode.tag !== newVNode.tag) {
    return true; // 直接替换
  }

  // 属性变化检测
  const attrsChanged = Object.keys(newVNode.attrs).some(key => 
    oldVNode.attrs[key] !== newVNode.attrs[key]
  );

  // 子节点Diff
  if (newVNode.children.length !== oldVNode.children.length) {
    return true;
  }

  return attrsChanged || newVNode.children.some((child, i) => 
    diff(oldVNode.children[i], child)
  );
}

优化策略

  • 按层级比较避免跨层级移动

  • 使用Key标识稳定子节点

  • 相同类型组件直接复用