React元件中的key

2022-06-23 23:03:17 字數 1652 閱讀 8531

一、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值的話,它會在下次渲染的時候被銷燬並當作新的元件重新渲染進來

react陣列key的唯一性

1 不要使用陣列的index索引作為key 2 在相鄰的元素間,一定確保key的唯一性,如果出現了相同的 key,會丟擲一個 warning...

key中斷

1 中斷,很短的時間過去,然後回來。 2 訊號,軟中斷,而中斷屬於硬中斷。 3 實時核心,和分時核心。 4 同步,預先知道發生,非同步,預先...

React中的Keys

當你在react當中渲染列表項的時候,react會嘗試儲存對應每個單獨項的相關資訊,如果你的元件包含state狀態資料,那麼這些狀態資料必須...