1.虛擬DOM中key的作用:
1).簡單的說: key是 虛擬DOM對象的標(biāo)識，在更新顯示時key起著極其重要的作用
2).詳細(xì)的說:當(dāng)狀態(tài)中的數(shù)據(jù)發(fā)生變化時，react會根據(jù)[新數(shù)據(jù)]生成[新的虛擬DOM] ，隨后React進(jìn)行[新虛擬DOM]與[舊虛擬DOM]的diff比較，比較規(guī)則如下:
a.舊虛擬DOM中找到了與新虛擬DOM相同的key:
(1).若虛擬DM中內(nèi)容沒變，直接使用之前的真實(shí)DOM
(2).若虛擬DOM中內(nèi)容變了，則生成新的真實(shí)DOM，隨后替換掉頁面中之前的真實(shí)DOM
b. 舊虛擬DOM中未找到與新虛擬DOM相同的key
根據(jù)數(shù)據(jù)創(chuàng)建新的真實(shí)DOM，隨后渲染到到頁面
2.用index作kay能會引發(fā)的問題:
1.若對數(shù)據(jù)進(jìn)行:逆序添加、逆序利除等破壞順序操作:
會產(chǎn)生沒有必要的真實(shí)DOM更新==>界面效果沒問題，但效率低。
2.如果結(jié)構(gòu)中還包含輸入類的DOM:
會產(chǎn)生錯誤DOM更新==> 界面有問題。
3.開發(fā)中如何選擇key?:
1.最好使用每條數(shù)據(jù)的唯一標(biāo)識作為key, 比如id、手機(jī)號、身份證號、學(xué)號等唯值。
2.如果確定只是簡單的展示數(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}>增加一個小王</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}>增加一個小王</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"))