1.虛擬DOM中key的作用:
1).簡(jiǎn)單的說(shuō): key是 虛擬DOM對(duì)象的標(biāo)識(shí)，在更新顯示時(shí)key起著極其重要的作用
2).詳細(xì)的說(shuō):當(dāng)狀態(tài)中的數(shù)據(jù)發(fā)生變化時(shí)，react會(huì)根據(jù)[新數(shù)據(jù)]生成[新的虛擬DOM] ，隨后React進(jìn)行[新虛擬DOM]與[舊虛擬DOM]的diff比較，比較規(guī)則如下:
a.舊虛擬DOM中找到了與新虛擬DOM相同的key:
(1).若虛擬DM中內(nèi)容沒(méi)變，直接使用之前的真實(shí)DOM
(2).若虛擬DOM中內(nèi)容變了，則生成新的真實(shí)DOM，隨后替換掉頁(yè)面中之前的真實(shí)DOM
b. 舊虛擬DOM中未找到與新虛擬DOM相同的key
根據(jù)數(shù)據(jù)創(chuàng)建新的真實(shí)DOM，隨后渲染到到頁(yè)面
2.用index作kay能會(huì)引發(fā)的問(wèn)題:
1.若對(duì)數(shù)據(jù)進(jìn)行:逆序添加、逆序利除等破壞順序操作:
會(huì)產(chǎn)生沒(méi)有必要的真實(shí)DOM更新==>界面效果沒(méi)問(wèn)題，但效率低。
2.如果結(jié)構(gòu)中還包含輸入類的DOM:
會(huì)產(chǎn)生錯(cuò)誤DOM更新==> 界面有問(wèn)題。
3.開(kāi)發(fā)中如何選擇key?:
1.最好使用每條數(shù)據(jù)的唯一標(biāo)識(shí)作為key, 比如id、手機(jī)號(hào)、身份證號(hào)、學(xué)號(hào)等唯值。
2.如果確定只是簡(jiǎn)單的展示數(shù)據(jù)。用index也是可以的。
Diff的驗(yàn)證實(shí)例：
class Person extends React.Component{
state = {
person:[
{id:1,name:"小李",age:18},
{id:2,name:"小王",age:19}
]}
addPerson = ()=>{
const {person} = this.state
const p = {
id:person.length + 1,
name:"小陳",
age:20
}
this.setState({person:[p,...person]})
}
render(){
return(
<div>
<h2>展示人員信息一</h2>
<button onClick={this.addPerson}>增加一個(gè)小王</button>
{
this.state.person.map((row,index)=>{
return <div key = {index}>ID:{row.id} 姓名：{row.name},年齡：{row.age} <input type="text" /></div>
})
}
<h2>展示人員信息二</h2>
<button onClick={this.addPerson}>增加一個(gè)小王</button>
{
this.state.person.map((row,index)=>{
return <div key = {row.id}>ID:{row.id}姓名：{row.name},年齡：{row.age}
<input type="text" /></div>
})
}
</div>
)
}
}
ReactDOM.render(<Person/>,document.getElementById("test"))