React元件中的key

一、key的作用

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

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

//
this.state.users內容
this.state =,
, ],
....
//省略}
render()
return
(          
: )}
)  );

上面**在dom渲染掛載後，使用者列表只有張三和李四兩個使用者，王五並沒有展示處理，主要是因為react根據key認為李四和王五是同乙個元件，導致第乙個被渲染，後續的會被丟棄掉。

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

1) key相同，若元件屬性有所變化，則react只更新元件對應的屬性；沒有變化則不更新。

2) key值不同，則react先銷毀該元件(有狀態元件的componentwillunmount會執行)，然後重新建立該元件。

3) setstate：誰用到了所更新的state，就會重新整理該元件，render也並不是所有都會變化，隻變state改變的部分。

另外需要指明的是:

key不是用來提公升react的效能的，不過用好key對效能是有幫組的。

應該知道react使用virtual dom來比較ui狀態的變化，如果dom中的某一節點更新時重新渲染，一樣的話就不渲染。key屬性的作用就在與解決渲染list的這種難題，簡單來說，例如你有乙個list：

orange

banana

如果想更新成

orange

let list = this.props.fruits.map((fruit) =>);
return (
)

二、注意

1、key是react中使用的一種特殊的屬性（除此之外還有ref屬性）。當元素被建立的時候，react會將元素的key值和對應元素繫結儲存起來。

2、儘管key看起來像是props的一部分，可是事實上我們無法通過this.props.key獲取到key的值。react會在判斷元素更新的時候自動使用key，而元件自己是無法獲取到key的

3、當乙個列表被重新渲染時，react會根據較新的元素內容依據相應的key值來匹配之前的元素內容。

4、當乙個新的key值新增到列表中時，表示有乙個元件被建立；被刪除時表示有乙個元件被銷毀。

5、key值可以讓react明確標識每個元件，這樣在重新渲染的時候保有對應的狀態資料。

6、如果你去改變某個元件的key值的話，它會在下次渲染的時候被銷毀並當作新的元件重新渲染進來