React中key值有何作用以及key值的用法是什麼？ （附代碼）

這篇文章帶給大家的內容是關於React中key值有何作用以及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 <p>{item.name}</p>
        })
}

在你嘗試過後會發現，報錯沒了，渲染也沒問題不是很正常嘛？ ！但是強烈不推薦用數組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(
  <p>
    </p><h3>用户列表</h3>
    {this.state.users.map(u => <p>{u.id}:{u.name}</p>)}
  
 )
);

注意以上範例中，動態渲染的資料中，key以資料的id來定，而李四、王五的id相同而導致Key的雷同，最後的渲染結果為張三和李四，王五並沒有展示出來。主要是因為 react根據key認為李四和王五是同一個元件（李四和王五的key值相同），導致第一個被渲染，後續的會被丟棄掉。

這樣，有了key屬性後，就可以與元件建立了一種對應關係，react根據key來決定是銷毀重新建立元件還是更新元件

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

{dataList.map((item,index)=>{
        return <p>{item.name}</p>
        })
}

尤其如以上範例所示，key的值以Math.random()隨機產生而定，這使得陣列元素中的每項都重新銷毀然後重新創建，有一定的性能開銷；另外可能導致一些意想不到的問題出現。

所以，Key的值必須保證其唯一和穩定性

相關推薦：

如何讀取redis中的key值中的結果

React Native react-navigation 導覽使用詳解

以上是React中key值有何作用以及key值的用法是什麼？ （附代碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！