为什么react列表要加一个key

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

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

假设有一段代码

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

users.map((u, i) => <div key={i}>{u.username}</div>);

它会被渲染为：

<div key="1">bob</div>
<div key="2">sue</div>

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

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

DOM树也会相应的变为：

<div key="1">new-guy</div>
<div key="2">bob</div>
<div key="3">sue</div>

对比一下可以发现：

<div key="1">bob</div>   |  <div key="1">new-guy</div>
<div key="2">sue</div>   |  <div key="2">bob</div>
                         |  <div key="3">sue</div>

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

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

                           |  <div key="new-guy">new-guy</div>
<div key="bob">bob</div>   |  <div key="bob">bob</div>
<div key="sue">sue</div>   |  <div key="sue">sue</div>

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