示例
先看一段代碼
constructor() {
super();
this.state = {
sort: [{
name: 'a'
}, {
name: 'b'
}, {
name: 'c'
}]
}
}
...
render() {
return (
<ul>
{this.state.sort.map((item, index) => {
return <li key={index}>{item.name} <input type="text"/></li>
})}
</ul>
);
}
...
是不是很眼熟府框？在很長(zhǎng)一段時(shí)間，我都是這么設(shè)置key來消除react的warning的口柳，然后突然有次發(fā)現(xiàn)會(huì)出現(xiàn)這樣的情況，見下圖：
key_index.gif
出現(xiàn)這個(gè)情況，是因?yàn)閞eact是以key來唯一標(biāo)識(shí)組件的店煞，當(dāng)發(fā)現(xiàn)update前和update后key值沒有變化衩椒，react就會(huì)認(rèn)為update前后組件是同一個(gè)毛萌，進(jìn)而只會(huì)對(duì)內(nèi)部的屬性進(jìn)行修改做盅。拿上面的例子來講，就是react會(huì)作出這樣的判斷：
- 檢測(cè)key值帅刀，發(fā)現(xiàn)都是0，判定組件為同一個(gè)锌云；
- 檢測(cè)item.name部分攻冷，發(fā)現(xiàn)有變化，重新渲染這部分等曼；
- 檢測(cè)input里烦，發(fā)現(xiàn)不依賴props，所以不進(jìn)行重新渲染胁黑；
優(yōu)化示例
這次我們將key設(shè)置為一個(gè)特殊字段废封，保證其唯一性丧蘸，假設(shè)item.name是唯一的。
render() {
return (
<ul>
{this.state.sort.map((item, index) => {
return <li key={item.name}>{item.name} <input type="text"/></li>
})}
</ul>
);
}
然后這次再看效果
key_name.gif
這次修改后力喷，react在拿到key后，可以判斷出key值和之前不一弟孟，再進(jìn)行對(duì)比爽冕，發(fā)現(xiàn)組件的位置進(jìn)行了交換披蕉，所以做出了符合我們預(yù)期的行為。
總結(jié)
渲染數(shù)組是非常常見的需求没讲，但是選擇哪個(gè)字段作為key需要慎重考慮，一點(diǎn)要保證其唯一性礁苗，盡量避免使用array的索引值作為其key值。
