React中的列表渲染与key
React 列表渲染中 key 的作用、稳定身份的重要性与常见误区。
#tech / dev / frame
#resource / react
#type / concept
#status / growing
[!info] related notes
- 所属 MOC: React MOC
- 上位主题: React组件渲染与重渲染
- 前置概念: jsx
- 深入理解: virtual-dom, react-list-performance-optimization
React中的列表渲染与key
React 列表渲染里最重要的不只是 map()，而是 key。key 不是语法附属品，而是节点身份信息。
一句话定义
key 帮助 React 在前后两次渲染之间识别“谁还是谁”，从而更安全地复用和更新列表节点。
为什么它这么重要
如果没有稳定 key，React 在比较列表时就更难判断某个节点是“同一个元素的变化”，还是“另一个元素替换了它”。
一个最典型的例子
{items.map(item => (
<input key={item.id} defaultValue={item.name} />
))}这里 key={item.id} 的意义不是语法要求，而是告诉 React：每个输入框都和哪条业务数据绑定。
如果这里改成 key={index}，一旦头部插入一项，后面节点就更容易错位复用。
最常见的后果
- 输入框内容错位
- 局部状态复用错乱
- 动画和 DOM 更新异常
为什么不推荐随便用 index
当列表存在插入、删除、排序时，index 代表的位置会变，但节点真实身份并没有跟着稳定下来，于是 React 就可能复用错对象。
什么时候 key 才算好
- 稳定
- 唯一
- 能代表这条业务数据本身
一个更工程化的结论
key 的问题本质是“节点身份设计”，不是“列表语法细节”。
所以：
- 如果数据有业务 id，就优先用业务 id
- 如果列表会排序、插入、删除，就更不要随便用 index
- 只有在列表顺序绝对固定、没有局部状态时，index 风险才相对小
最短记忆方式
key 不是给 React 消除警告用的，而是给节点建立身份用的。