遍历对象的每一个属性深度对比是非常浪费性能的。
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就认为我们是新增，性能就比较好。
