【react】---react中key值的作用


一、React中key值得作用

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 值必須保證其唯一和穩定性

下面案例中key的值以Math.random() 隨機生成而定,這使得數組元素中的每項都重新銷毀然后重新創建,有一定的性能開銷

{
        dataList.map((item,index)=>{
            return <div style={mystyle} key={Math.random()}>{item.name}</div>
        })
}

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM