遍歷對(duì)象的每一個(gè)屬性深度對(duì)比是非常浪費(fèi)性能的。
React使用列表的key來(lái)進(jìn)行對(duì)比,如果不指定,就默認(rèn)為index下標(biāo)。
那么,為什么不指定key/用index下標(biāo)是不好的呢?

假設(shè)現(xiàn)在有這樣一段代碼

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

它會(huì)渲染出以下DOM樹(shù)

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

然后用戶做了某個(gè)操作, obj被unshift 另一個(gè)對(duì)象,變成:

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

此刻的DOM樹(shù)會(huì)如下

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

DOM樹(shù)的前后對(duì)比如下

image.png

由于React是根據(jù)key值來(lái)識(shí)別變化的，雖然我們?nèi)祟惪梢钥闯鍪切略隽薼ove，但是React的變化是：

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

這是比較消耗性能的。

如果我們一開(kāi)始代碼如下

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

那么前后DOM的對(duì)比如下

<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就認(rèn)為我們是新增，性能就比較好。