为什么react列表要加一个key

如果没有key，那么react就需要遍历对象的每一个属性去判断对象是否相同。
如果我们不指定key，key就会默认为index。

那么为什么用index是不好的？

假设有一段代码

const users = [{ username: "bob" }, { username: "sue" }];

users.map((u, i) => 
{u.username}
);

它会被渲染为：

bob
sue

然后用户unshift一个新的对象， 变成：

const users = [
  { username: "new-guy" },
  { username: "bob" },
  { username: "sue" },
];

DOM树也会相应的变为：

new-guy
bob
sue

对比一下可以发现：

bob
   |  
new-guy
sue
   |  
bob
                         |  
sue

由于react通过key识别变化，所以react此时会做以下几个操作：

1. bob -> new-guy
2. jack -> bob
3. add sue
   但是如果我们给定一个特有的key，比如id（这个例子用name作为key），
   react就可以准确的识别出哪里发生了变化，例如：

                           |  
new-guy
bob
   |  
bob
sue
   |  
sue

这个时候react就知道，只需unshift一次就可以完成操作。