节点比较方式
一句话结论:React 复用节点主要看“key + type”;key 决定身份,type 决定形态,任一不匹配都倾向于删除旧节点并创建新节点。
1. 单节点(Element)比较
- key 相同:再看 type
- type 相同:复用 Fiber,更新 props,继续对比子节点
- type 不同:删旧建新(旧 Fiber 子树整体作废)
- key 不同:认为不是同一个节点,走插入/删除
2. 文本节点/空节点
- 文本通常按“是否仍是文本”判断复用
null/false等视为“没有节点”,可能触发删除
3. 面试常见追问
- “为什么 key 能解决移动问题”:因为 key 让 React 能跨索引定位旧节点
- “为什么跨层级不做精细 Diff”:代价高,且组件模型下收益有限