react中key的做用

背景:react

若是爲父節點添加多個相同的子節點時,不添加key屬性,會報錯但同時也會渲染出dom,渲染出dom實際上是證實能從差別對象中渲染出真實dom,但報錯的緣由是由於這種寫法會影響渲染的性能,不利於生層dom節點。算法

做用:數組

key的做用主要是用來減小不必的diff算法對比,由於對於一個組件或者節點來講,只要父節點狀態或者屬性發生變化,該組件就會進行diff對比,即便該組件沒變化,而若是爲組件引入了key值,就能夠在diff對比前先作一個校驗,判斷該組件是否須要diff對比,即便是diff對比,也能夠判斷該組件是直接更新操做仍是銷燬或者新建操做,從而提升了diff算法的效率;dom

特別在渲染同級同結構的組件們時,key能夠爲它們加上了身份的標誌,在rerender時,能夠經過key來判斷該組件是否已經存在,是否須要跟新或者銷燬,新建等操做,提升了diff算法在同級節點上的操做。源碼分析

原理:性能

由於在reactelement中有一個屬性是key,該屬性默認是爲空值,因此通常狀況下,只要組件不加上key值,react是不會去校驗組件的key,而是直接採用diff算法進行對比,一旦組件加上了key值,react就會在渲染時對該組件的身份進行校驗,首先校驗新舊組件的key值是否是一致,不一致的話,該組件直接銷燬,而後在新建該組件;若是一致,則比較組件的屬性是否發生變化,若是發生變化,則採用diff算法進行對比,而後得出差別對象,若是屬性沒發生變化,則認爲該組件不須要改變;spa

大概的流程圖:對象

clipboard.png

  • key相同:若組件屬性有所變化,則react只更新組件對應的屬性;沒有變化則不更新。
  • key值不一樣:則react先銷燬該組件,而後從新建立該組件。

用法:blog

(通常同級同結構的子節點都須要採用key屬性,方便diff算法的使用)ip

  • 純靜態的同級同結構節點的渲染,能夠採用index做爲key的值,由於這裏不須要動態去變化節點裏面的內容的值;
  • 對於一組動態變化的數組來講,採用index做爲key的值,會有可能出現問題,由於index的值和數組內的元素內容不具備關聯性,因此即便採用了index做爲key,子組件的內容有可能不會隨着屬性的變化而發生變化(只要組件內該元素不與屬性構成聯繫),因此通常採用數組中元素的某一個惟一值做爲key,這樣一來,只要統一位置的節點的key值不一致,就會直接銷燬和新建而不是直接更新;
  • 對於一個不想受到父組件屬性狀態影響而致使不必的渲染的組件,能夠採用key值,由於只要key值不發生改變,組件的屬性不變,即便父組件渲染,該組件也不會發生變化,只有組件的狀態或者屬性發生變化,組件纔會二次渲染;一旦key值變化,就直接組件銷燬而後再新建該組件。

以上就是我對react中key的認識和了解,雖然沒有過多的深刻研究react裏面關於key的源碼分析,但經過這篇博客,也會必定程度上對react的key有更深刻的認識,如有不正確的地方,歡迎指出。

相關文章
相關標籤/搜索