为什么React列表要加key且不推荐使用index

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

假设现在有这样一段代码

let obj = [{username: 'faith'}, {username: 'tt'}];
obj.map((item,index) => { return 
 {item.usernae} 
 })

它会渲染出以下DOM树

 faith 
 tt 

然后用户做了某个操作, obj被unshift 另一个对象,变成:

let obj = [ {username: 'love'}, {username: 'faith'}, {username: 'tt'}];

此刻的DOM树会如下

 love 
 faith 
 tt 

DOM树的前后对比如下

image.png

由于React是根据key值来识别变化的，虽然我们人类可以看出是新增了love，但是React的变化是：

• faith >> love
• tt >> faith
• 新增 tt

这是比较消耗性能的。

如果我们一开始代码如下

let obj = [{username: 'faith'}, {username: 'tt'}];
obj.map((item,index) => { return 
 {item.usernae} 
 })

那么前后DOM的对比如下

 faith 
 tt 


 love 
 faith 
 tt 

image.png

React就认为我们是新增，性能就比较好。