key 是 Diff 算法在列表更新中正确识别节点身份、实现高效复用与移动的前提；无 key 时仅按索引比对，易误判为全量变更；有 key 才能支撑双端比较策略、保障组件实例复用及状态一致性。
Diff 算法本身不“依赖”key，但它在列表更新场景中无法高效工作——除非有 key。
key 是节点身份的唯一凭证
没有 key 时，框架只能按顺序（索引）比对节点：新旧列表第 0 位、第 1 位……一一对应。一旦插入、删除或调换顺序，后续所有节点的索引都会偏移，导致算法误判为“全部变更”，进而触发大量无谓的 DOM 替换或重渲染。
- 比如旧列表是 [A, B, C]，新列表是 [B, A, C]，不设 key 时，A 和 B 都会被认为“内容变了”，实际只是位置交换
- 加上唯一 key（如
id）后，算法能直接识别：A 还是 A，B 还是 B，只需移动 DOM 节点，不重建
key 支撑双端比较策略落地
现代 Diff（如 Vue/React）普遍采用“头尾四次比对”策略：先比首尾，再交叉比对。这个过程必须靠 key 来确认“哪个旧节点对应哪个新节点”。否则，仅靠标签名或文本内容，极易匹配错误。
Ainative React Sdk
下载
使用 @ainative/react-sdk 为 React 应用添加 AI 聊天和积分。适用于 (1) 安装 @ainative/react-sdk，(2) 使用 useChat hook 实现聊天完成。
- 头头匹配失败？看尾尾是否一致
- 尾尾也不对？尝试旧头 vs 新尾、旧尾 vs 新头
- 每一轮比对都依赖 key 做快速查表，而不是逐个遍历找“长得像”的节点
key 决定组件是否复用或重建
对于动态组件（如路由页、表单模块），key 不仅影响 DOM 位置，更直接影响实例生命周期。相同类型组件若 key 不变，就复用实例、只更新 props；key 变了，就销毁旧实例、创建全新实例。
- 典型场景：切换用户资料页时，用
:key="user.id"可确保每次加载都是干净的表单状态 - 若误用
:key="index"或随机数，可能造成状态残留、输入框失焦、动画错乱等问题
key 不是性能“锦上添花”，而是正确性的基础
它不是可选优化项，而是 Diff 在列表和动态结构中保持行为可预测的前提。一个稳定、唯一、连续的 key（如数据库 ID），能让算法准确区分“节点移动”和“节点替换”，避免 UI 错乱、状态丢失、输入框内容跳变等真实问题。
不复杂但容易忽略。
