，React 不会试图比较它们的内部差异——直接销毁整棵旧树，重建新树。

// 旧的虚拟 DOM

  
  子元素

// 新的虚拟 DOM

  
  子元素

这种情况下React 会：销毁旧的 div 及其子节点，创建新的 p 和子节点。

这意味着：跨层级移动 DOM 节点，在 React 里代价比你想象的高。在实际组件设计中，尽量避免通过条件渲染在不同层级之间“搬运”同一个组件。Ru果你的根节点类型频繁切换，会造成不必要的子组件销毁重建。这个假设告诉我们：组件的根节点类型，Neng稳定就稳定。

React 的 Diff 是逐层对比的，不会尝试找跨层移动的节点。

旧树                    新树
    A                       A
   / \                     / \
  B   C        →          B   C
 / \                           \
D   E                           E

Ru果你把节点 D 从 B 的子节点移动到了 C 的子节点下React kan到的是：B 下面少了 D，C 下面多了 E。它不会识别出“这是同一个节点在移动”，而是执行一次删除 + 一次创建。

这是三个假设里和日常开发Zui紧密的一个。当对比一组子节点时Ru果没有 key，React 只Neng按顺序逐一对比：

// 旧列表

  
张三
   // 位置 0
  
李四
   // 位置 1
  
王五
   // 位置 2

// 在开头插入"赵六"后的新列表

  
赵六
   // 位置 0
  
张三
   // 位置 1
  
李四
   // 位置 2
  
王五
   // 位置 3

没有 key，React 按位置对比：位置 0 内容变了→ geng新；位置 1 内容变了 → geng新；位置 2 内容变了 → geng新；位置 3 是新增 → 新建。改了 3 个节点，实际上只是新增了 1 个。

有了 key，React Neng识别出哪些节点是“同一个”，从而准确复用：

  
赵六
   // 新增
  
张三
  // 复用，不geng新
  
李四
      // 复用，不geng新
  
王五
    // 复用，不geng新

只Zuo 1 次插入操作，剩下三个节点直接复用。

上面的例子只是性Neng问题，但下面这个是功Neng bug。这是 React 开发中Zui经典的“坑”之一，我觉得有必要把例子说完整。

场景：列表每一项有一个输入框，用户在第一项的输入框里填了内容，然后删除第一项。

初始列表 ，用 index Zuo key：

// 初始状态

  
张三
  
李四
  
王五

现在删除张三，列表变成

// 删除后

  
李四
  // key=0，内容从"张三"变成了"李四"
  
王五
  // key=1，内容从"李四"变成了"王五"
                          // key=2 消失 → 删除

React kan到的是：key=0 还在只是名字变了于是geng新 DOM；key=1 还在只是名字变了于是geng新 DOM。

结果：删掉张三之后李四的输入框里还显示着刚才给张三写的备注内容。数据删了UI 状态还留着。

React 复用了原来“张三”那个 DOM 节点，只geng新了 name 属性——但输入框是非受控的，它的内部状态跟着 DOM 节点走，不跟着数据走。

改用唯一 ID Zuo key，情况就完全不同了：

// 初始状态

  
张三
  
李四
  
王五

// 删除后

  
李四
   // key 没变，内容没变 → 跳过
  
王五
 // key 没变，内容没变 → 跳过
                              // key="zhangsan" 消失 → 删除

React 准确识别出只有"zhangsan"消失了：1 次 DOM 操作，完全正确。

所以关于 key 的使用，记住这几条铁律：

✅ 用数据的唯一 ID Zuo key
❌ 不用 index Zuo key
❌ 不用随机数Zuo key

梳理完这些，我产生了几个新问题，暂时还没完全搞清楚。不过先把目前的整体流程串一下：

用户交互 / 数据请求
        ↓
setState / useState 触发geng新
        ↓
React 调用 render，生成新的虚拟 DOM 树
        ↓
┌─────────────────────────────────────┐
│           Diff 算法          │
│                                     │
│  类型不同？→ 直接替换                  │
│  只比同层  → 不跨层                   │
│  有 key？  → 精准识别复用              │
└─────────────────────────────────────┘
        ↓
生成Zui小 patch
        ↓
批量geng新到真实 DOM
        ↓
浏览器渲染

虚拟 DOM 让你享受到了“手动精准geng新”的性Neng，但不需要你自己写那些繁琐的 DOM 操作逻辑。它的核心价值只有一句话：Zui小化真实 DOM 操作次数。

尽管虚拟DOM本身具备一定优化Neng力,不当使用仍会导致性Neng问题。其中,Diff算法是决定geng新效率的关键,而合理的优化策略Neng进一步提升应用性Neng。

举个例子——一个有 1000 个节点的页面某次状态变化只影响了其中 1 个节点。Ru果没有 Diff，全量 innerHTML，代价巨大。有了 Diff，React 只geng新那 1 个节点。这就是优化的本质。

当然React 也提供了像 `componentShouldUpdate` 或者 `React.memo` 这样的钩子，让开发者手动介入，告诉 React：“这部分没变，别比了直接跳过”。这也是性Neng优化的重要手段，不过那就是另一个话题了。

这些可Neng是下一篇的方向，也欢迎有研究的朋友交流。毕竟前端技术的深水区，总是越挖越有意思。