关于React 与 Vue 列表加key

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

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

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

它会渲染出的这个DOM树 :

<div key="1">zhangsan</div>
<div key="2">lisi</div>

如果我们把users通过unshift一项:

const users = [
  { username: "wanger" },
  { username: "zhangsan " },
  { username: "lisi" },
];

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

<div key="1">wanger</div>
<div key="2">zhangsan</div>
<div key="3">lisi</div>

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

<div key="1">zhansan</div>   |  <div key="1">wanger</div>
<div key="2">lisi</div>      |  <div key="2">zhangsan</div>
                             |  <div key="3">lisi</div>

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

zhangsan => wanger
lisi => zhangsan
添加 lisi

此时React内部程序执行了这三步操作, 非常消耗性能
如果我们一开始就给它指定一个合适的key, 比如用name :

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

React 认为的变化就变成 :

                             |  <div key="1">wanger</div>
  <div key="1">zhansan</div> |  <div key="2">zhangsan</div>
  <div key="2">lisi</div>    |  <div key="3">lisi</div>

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