react中key的用法是什麼

在react中，key用於識別元件，可在DOM中的某些元素被增加或刪除時識別哪些元素發生了變化，是一種身份標識；可以根據key來決定是銷毀還是更新元件，若key相同，元件有變更就只更新元件對應的屬性，若key不同，會銷毀先前的元件重新渲染。

本教學操作環境：Windows10系統、react17.0.1版、Dell G3電腦。

react中key的用法是什麼

簡單來說，react利用key來識別元件，它是一種身分識別標識，就像我們的身分證用來辨識一個人一樣。每個key對應一個元件，相同的key react認為是同一個元件，這樣後續相同的key對應元件就不會被建立。

Keys可以在DOM中的某些元素被增加或刪除的時候幫助React識別哪些元素發生了變化。因此你應給數組中的每一個元素一個確定的標識。

react的diff演算法是把key當成唯一id然後比對元件的value來決定是否需要更新的，所以如果沒有key，react將不會知道該如何更新元件。

你不傳key也能用是因為react偵測到子元件沒有key後，會預設將陣列的索引當作key。

react根據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的。

推薦學習：《react影片教學》

以上是react中key的用法是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！