react中的key屬性，它是一個特殊的屬性，它是出現不是給開發者用的（例如你為一個組件設置key之后不能獲取組件的這個key props），而是給react自己用的。

簡單來說，react利用key來識別組件，它是一種身份標識標識，就像我們的身份證用來辨識一個人一樣。每個key對應一個組件，

相同的key react認為是同一個組件，這樣后續相同的key對應組件都不會被創建。例如下面代碼：

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

上面代碼在dom渲染掛載后，用戶列表只有張三和李四兩個用戶，王五并沒有展示處理，主要是因為react根據key認為李四和王五是同一個組件，導致第一個被渲染，后續的會被丟棄掉。

index作為key是一種反模式

在list數組中，用key來標識數組創建子組件時，若數組的內容只是作為純展示，而不涉及到數組的動態變更，其實是可以使用index作為key的。

但是，若涉及到數組的動態變更，例如數組新增元素、刪除元素或者重新排序等，這時index作為key會導致展示錯誤的數據。本文開始引入的例子就是最好的證明。

{this.state.data.map((v,idx)=><Item key={idx} v={v} />)} // 開始時：['a','b','c']=> <ul><li key="0">a <input type="text"/></li><li key="1">b <input type="text"/></li><li key="2">c <input type="text"/></li> </ul>// 數組重排 -> ['c','b','a'] => <ul><li key="0">c <input type="text"/></li><li key="1">b <input type="text"/></li><li key="2">a <input type="text"/></li> </ul>

key的值要穩定唯一

在數組中生成的每項都要有key屬性，并且key的值是一個永久且唯一的值，即穩定唯一。

在理想情況下，在循環一個對象數組時，數組的每一項都會有用于區分其他項的一個鍵值，相當數據庫中主鍵。這樣就可以用該屬性值作為key值。但是一般情況下可能是沒有這個屬性值的，這時就需要我們自己保證。

但是，需要指出的一點是，我們在保證數組每項的唯一的標識時，還需要保證其值的穩定性，不能經常改變

var localCounter = 1; this.data.forEach(el=>{ el.id = localCounter++; }); //向數組中動態添加元素時， function createUser(user) { return { ...user, id: localCounter++ } }

轉載于:https://www.cnblogs.com/wanDPS/p/10491763.html

總結

以上是生活随笔為你收集整理的react key的作用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。