key 的作用、为何最好不用 index

1. react/vue 中的 key 作用？

• key 是虚拟 dom 对象的标识。
• 当状态中的数据发生变化时，react 会根据【新数据】生成【新的虚拟 dom】，随后 react 进行【新虚拟 dom】与【旧虚拟 dom】的 diff 比较。规则如下
  • 旧虚拟 dom 与新的虚拟 dom 的 key 相同
    1. 内容也相同，直接复用之前的真实 dom
    2. 如果发生内容改变，则生成新的真实 dom,并替换掉页面之前的真实 dom
  • 旧虚拟 dom 中未找到与新虚拟 dom 相同的 key
    1. 根据数据创建新的真实 dom，再渲染到页面

---

2. 为何遍历列表时，key 最好不要使用 index?

• 如果数据进行：逆序添加，逆序删除等破坏顺序的操作：
  • 会产生没有必要的真实 dom   =>  性能没有充分利用，虽然没问题，但效率低。
• 且如果有输入类的 input 之类的 dom
  • 会产生错误的 dom 更新 =>页面有问题
• 
• 如果不存在对数据进行逆序添加，逆序删除等破坏顺序的操作，仅用于静态渲染用于展示，使用 index 当做 key 是没有问题的。
• 所有推荐 key 使用   每条数据的唯一标识：比如 id、手机好、身份证号、学号等、、