【Q054】key 是干什么的

[kangyana]

1. key 的作用

同一层级的某个节点添加了对于其他同级节点唯一的key属性，当它在当前层级的位置发生了变化后。 react diff算法通过新旧节点比较后，如果发现了key值相同的新旧节点，就会执行移动操作（然后依然按原策略深入节点内部的差异对比更新），而不会执行原策略的删除旧节点，创建新节点的操作。 这无疑大大提高了React性能和渲染效率。

2. key 的执行过程

对新集合中的节点进行循环遍历，通过唯一的 key 判断新旧集合中是否存在相同的节点。 如果存在相同节点，判断要移动的节点在旧集合中的位置不在最后一位，才进行移动操作。

3. index 可以作为 key 吗？

React官方建议不要用遍历的index作为这种场景下的节点的key属性值。

比如当前遍历的所有节点类型都相同，其内部文本不同，在用index作key的情况下，当我们对原始的数据list进行了某些元素的顺序改变操作，导致了新旧集合中在进行diff比较时，相同index所对应的新旧的节点其文本不一致了，就会出现一些节点需要更新渲染文本，而如果用了其他稳定的唯一标识符作为key，则只会发生位置顺序变化，无需更新渲染文本，提升了性能。

4. key 的缺点

在开发过程中，尽量减少类似将最后一个节点移动到列表首部的操作。

5. key 使用注意事项

• 如果遍历的列表子节是作为纯展示，而不涉及到列表元素顺序的动态变更，那使用index作为key还是没有问题的。
• key只是针对同一层级的节点进行了diff比较优化，而跨层级的节点互相之间的key值没有影响。
• 如果存在新旧集合中，相同的key值所对应的节点类型不同（比如从span变成div），这相当于完全替换了旧节点，删除了旧节点，创建了新节点。
• key值在比较之前都会被执行toString()操作，所以尽量不要使用object类型的值作为key，会导致同一层级出现key值相同的节点。