1.虛擬DOM中key的作用:

    1).簡單的說: key是 虛擬DOM對象的標識，在更新顯示時key起著極其重要的作用

    2).詳細的說:當狀態中的數據發生變化時，react會根據[新數據]生成[新的虛擬DOM] ，隨后React進行[新虛擬DOM]與[舊虛擬DOM]的diff比較，比較規則如下:

    a.舊虛擬DOM中找到了與新虛擬DOM相同的key:

         (1).若虛擬DM中內容沒變，直接使用之前的真實DOM

         (2).若虛擬DOM中內容變了，則生成新的真實DOM，隨后替換掉頁面中之前的真實DOM

    b. 舊虛擬DOM中未找到與新虛擬DOM相同的key

       根據數據創建新的真實DOM，隨后渲染到到頁面

2.用index作kay能會引發的問題:

    1.若對數據進行:逆序添加、逆序利除等破壞順序操作:

         會產生沒有必要的真實DOM更新==>界面效果沒問題，但效率低。  

    2.如果結構中還包含輸入類的DOM:

      會產生錯誤DOM更新==> 界面有問題。  

3.開發中如何選擇key?:

    1.最好使用每條數據的唯一標識作為key, 比如id、手機號、身份證號、學號等唯值。

    2.如果確定只是簡單的展示數據。用index也是可以的。

Diff的驗證實例：

 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"))