react中的key怎么使用

這篇“react中的key怎么使用”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“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中的key怎么使用”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。