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

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

假设现在有这样一段代码

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

它会渲染出以下DOM树

<div key = '0'> faith </div>
<div key = '1'> tt </div>

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

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

此刻的DOM树会如下

<div key = '0'> love </div>
<div key = '1'> faith </div>
<div key = '2'> tt </div>

DOM树的前后对比如下

image.png

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

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

这是比较消耗性能的。

如果我们一开始代码如下

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

那么前后DOM的对比如下

<div key = 'faith'> faith </div>
<div key = 'tt'> tt </div>


<div key = 'love'> love </div>
<div key = 'faith'> faith </div>
<div key = 'tt'> tt </div>

image.png

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