为什么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操作

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