React key值的做用和使用

在react項目中總會遇到這樣一個的坑

這是警告數組遍歷子元素要有一個惟一的key值，可是key究竟是什麼，在代碼中到底起了什麼做用？

key概述

react中的key屬性，它是一個特殊的屬性，它的出現不是給開發者用的（例如你爲一個組件設置key以後，也仍沒法獲取這個組件的key值），而是給react本身用的。
簡單來講，react利用key來識別組件，它是一種身份標識標識，就像咱們的身份證用來辨識一我的同樣。每一個key對應一個組件，相同的key react認爲是同一個組件，這樣後續相同的key對應組件都不會被建立。

key的使用場景

在項目開發中，key屬性的使用場景最多的仍是由數組動態建立的子組件的狀況，須要爲每一個子組件添加惟一的key屬性值。那會有的人就會天然而然想到，key和動態渲染的子元素獲取的index位置的值很接近，那不是能夠直接用index附上key的值呢key={index}?

例如：
{dataList.map((item,index)=>{
        return <div style={mystyle} key={index}>{item.name}</div>
        })
}

在你嘗試事後會發現，報錯沒了，渲染也沒問題不是很正常嘛？！可是強烈不推薦用數組index來做爲key。
若是數據更新僅僅是數組從新排序或在其中間位置插入新元素，那麼視圖元素都將從新渲染。

例如：
原本index=2的元素向前移動後，那該元素的key不也一樣發生了改變那這樣會改變的Key就沒有任何的存在乎義，既然是做爲「身份證」同樣的存在，那就不容有失。固然，在你用key值建立子組件的時候，若數組的內容只是做爲純展現，而不涉及到數組的動態變動，實際上是可使用index做爲key的。

key的值必須保證惟一且穩定

我在與Key值打過幾回交道事後，以爲key值就相似於數據庫中的主鍵id同樣，有且惟一。

//this.state.users內容。注意：李四和王五的id相同！！！
this.state = {
 users: [{id:1,name: '張三'}, {id:2, name: '李四'}, {id: 2, name: "王五"}],
 ....//省略
}
render()
 return(
  <div>
    <h3>用戶列表</h3>
    {this.state.users.map(u => <div key={u.id}>{u.id}:{u.name}</div>)}
  </div>
 )
);

注意以上範例中，動態渲染的數據中，key以數據的id來定，而李4、王五的id相同而致使Key的雷同，最後的渲染結果爲張三和李四，王五並無展現出來。主要是由於 react根據key認爲李四和王五是同一個組件（李四和王五的key值相同），致使第一個被渲染，後續的會被丟棄掉。

這樣，有了key屬性後，就能夠與組件創建了一種對應關係，react根據key來決定是銷燬從新建立組件仍是更新組件。

---

而且，Key也要保證值的穩定性，例如：

{dataList.map((item,index)=>{
        return <div style={mystyle} key={Math.random()}>{item.name}</div>
        })
}

尤爲如以上範例中所示，key的值以Math.random()隨機生成而定，這使得數組元素中的每項都從新銷燬而後從新建立，有必定的性能開銷；另外可能致使一些意想不到的問題出現。

因此，Key的值必須保證其惟一和穩定性