为什么vue/react中的列表要加key

列表中为什么要加key，以及为什么用index是不好的（以下vue同样的原理）

遍历对象的每一个属性深度对比是非常消耗性能的
react使用列表的key来进行对比，如果不指定，则默认为index下标，那么，为什么说使用index是不好的呢

• 假设有这样一段代码

const users = [{name: 'jock'}, {name: 'mary'}]
users.map((user, index) => <div key={index}>{user.name}</div>)

它会渲染出这个dom树

<div key='0'>jock</div>
<div key='1'>mary</div>

然后用户做了某个操作，users被unshift了一个对象，变成

const users = [{name: 'new-xixi'}, {name: 'jock'}, {name: 'mary'}]

DOM树就会变成这样,前后对比：

<div key='0'>jock</div>    |    <div key='0'>new-xixi</div>
<div key='1'>mary</div>    |    <div key='1'>jock</div>
                           |    <div key='2'>mary</div>

• 但是react使用key来识别变化，所以它认为的变化是：

jock ----- new-xixi
mary ----- jock
添加 mary

非常消耗性能？？！！

• 但是如果一开始就指定一个合适的key，比如name

users.map(user => <div key={user.name}>{user.name}</div>)

react认为的变化就变成：

                              |    <div key='new-xixi'>new-xixi</div>
<div key='jock'>jock</div>	  |    <div key='jock'>jock</div>
<div key='mary'>mary</div>    |    <div key='mary'>mary</div>      

这样列表就只是做一了个unshift操作

文章只做学习过程中的记录使用