react中的key屬性,它是一個特殊的屬性,它是出現不是給開發者用的,而是給React自己使用,有了key屬性后,就可以與組件建立了一種對應關系,簡單說,react利用key來識別組件,他是一種身份標識,就像每個人有一個身份證來做辨識一樣。每個key 對應一個組件,相同的key react認為是同一個組件,這樣后續相同的key對應組件都不會被創建
key值相同
如果兩個元素是相同的key,且滿足第一點元素類型相同, 若元素屬性有所變化,則React只更新組件對應的屬性,這種情況下,性能開銷會相對較小
key值不同
在render函數執行的時候,新舊兩個虛擬DOM會進行對比,如果兩個元素有不同的key,那么在前后兩次渲染中就會被認為是不同的元素,這時候舊的那個元素會被unmount,新的元素會被mount
//更新前 render(){ return ( <List key = '1'/> ); } //更新后 render(){ return ( <List key = '2'/> ); }
二、例子
//tree1 <ul> <li key='1'>1</li> <li key='2'>2</li> </ul> //tree 2 <ul> <li key='1'>1</li> <li key='3'>3</li> <li key='2'>2</li> </ul>
如果沒有key值得情況下,react並不會執行插入操作,他直接會移除原先的第二個子元素,然后再append進去剩下的子元素,而其實我們這個操作只只需要一個insert操作就能完成。為了解決這種問題,react需要我們提供給一個key來幫助更新,減少性能開銷
如果有key值得情況下,react就會通過key來發現tree2的第二個元素不是原先tree1的第二個元素,原先的第二個元素被挪到下面去了,因此在操作的時候就會直接指向insert操作,來減少dom操作的性能開銷
三、不推薦用屬性中的index來做key值
大部分情況下我們要在執行數組遍歷的時候會用index來表示元素的key。這樣做其實並不是很合理。我們用key的真實目的是為了標識在前后兩次渲染中元素的對應關系,防止發生不必要的更新操作。那么如果我們用index來標識key,數組在執行插入、排序等操作之后,原先的index並不再對應到原先的值,那么這個key就失去了本身的意義,並且會帶來其他問題
四、注意事項
React中的key 值必須保證其唯一和穩定性
{ dataList.map((item,index)=>{ return <div style={mystyle} key={Math.random()}>{item.name}</div> }) }