背景: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
大概的流程圖:對象
用法:blog
(通常同級同結構的子節點都須要採用key屬性,方便diff算法的使用)ip
以上就是我對react中key的認識和了解,雖然沒有過多的深刻研究react裏面關於key的源碼分析,但經過這篇博客,也會必定程度上對react的key有更深刻的認識,如有不正確的地方,歡迎指出。