为什么React & Vue 列表要加key?

遍历对象的每一个属性的深度对比是非常浪费性能的 .
React & Vue 使用列表的key来进行对比, 如果不指定就会默认为index为下标 .
那么, 为什么不指定key, 而用index为下标是不好的呢?

假设现在有一段这样React代码 :

const users = [{ name: "xxj" }, { name: "xsm" }];
users.map((item, index) => <div key={index}>{item.name}</div>);

它会渲染出的这个DOM树 :

<div key="1">xxj</div>
<div key="2">xsm</div>

然后用户做了某个操作, user被unshift另一个对象, 变成 :

const users = [
  { username: "new-xxj" },
  { username: "xxj" },
  { username: "xsm" },
];

此时的DOM树就会变成这样, 注意key的变化

<div key="1">new-xxj</div>
<div key="2">xxj</div>
<div key="3">xsm</div>

DOM树的前后对比是这样的 :

<div key="1">xxj</div>   |  <div key="1">new-xxj</div>
<div key="2">xsm</div>   |  <div key="2">xxj</div>
                         |  <div key="3">xsm</div>

人都是看表面的生物, 看的出来前后的变化只是在开头加了一个new-xxj而已 .
但是由于React使用key值来识别变化, 所以React认为的变化是 :

1. xxj => new-xxj
2. xsm => xxj
3. 添加 xsm
   此时React内部程序执行了这三步操作, 非常消耗性能

如果我们一开始就给它指定一个合适的key, 比如用name :

users.map((item, index) => <div key={item.name}>{item.name}</div>);

React 认为的变化就变成 :

                         |  <div key="new-xxj">new-xxj</div>
<div key="xxj">xxj</div>   |  <div key="xxj">xxj</div>
<div key="xsm">xsm</div>   |  <div key="xsm">xsm</div>

这样只需要做一个unshift操作, 性能节省