為什么不建議使用index作為key值?
官方回答:
在react或者vue中,回圈回傳鏈表的資料的時候,如果使用index索引值作為key會引起嚴重的性能問題,不推薦使用
那為什么會引起嚴重的性能問題呢
這就要從react和vue底層的diff演算法聊起了
我們都知道react框架使用的是虛擬DOM,每次更新都會產生新的虛擬DOM,然后使用diff演算法和舊的虛擬DOM進行比較,有不同才會產生新的真實DOM渲染到頁面中,這樣就大大的提高了效率和性能
宣告
- key是虛擬DOM的重要標識
- 在頁面更新的時候其起著重要的作用
具體什么作用
當前頁面資料
添加之后的頁面資料
表面上看沒有啥問題
看看使用index作為key時在這個頁面更新的程序中發生了什么
- 點擊添加之后,會產生一個新的虛擬DOM樹
- 然后這個新的DOM樹與舊的進行diff
- diff遵循以下原則
- 在舊的虛擬DOM中找到與新的虛擬DOM相同的key
- 內容沒有發生變化,就直接使用原來的真實DOM
- 內容發生改變,就替換掉之前舊的虛擬DOM,生成新的真實DOM
- 在舊的虛擬DOM中未找到與新的虛擬DOM相同的key
- 直接生成新的真實DOM
- 在舊的虛擬DOM中找到與新的虛擬DOM相同的key
- diff遵循以下原則
- 之前"趙的key為1",現在"孫的key為1",就會進行一次內容比較
- 內容發現不同,就生成新的真實DOM
- 然后回圈上面的操作
使用id作為key時在這個頁面更新的程序中發生了什么
- 點擊添加之后,會產生一個新的虛擬DOM樹
- 然后這個新的DOM樹與舊的進行diff
- 在舊的DOM中沒有找到跟"孫對應的key",直接生成新的真實DOM
- 然后回圈上面的操作
- 在舊的DOM中找到了和"趙"相同的key
- 發現內容也一樣,直接使用之前的真實DOM
生成新的真實DOM是比較消耗性能的
上述使用index作為key只是2兩條資料增加了一條,就需要生成3個新的真實DOM
如果是幾百條,上千條,新增一條就需要生成N+1個新的真實DOM!!!
而使用唯一值id,新增一條就只需要生成1個新的真實DOM!!!
有些情況會產生致命的問題
我們在每個形式之后添加一個文本輸入框,并輸入一些文字
然后再點擊添加
會發現使用index作為key值的時候,文本框中的內容沒有對應起來!!!
為什么?
還是diff演算法的原因
input框中的值變化是真實DOM發生了變化,但是虛擬DOM還是input,所以會沿用之前的DOM,這就產生了文本框和姓氏不對應的致命問題
而使用id作為key值就不會有這個問題
很多新手在做TODOlist的時候就會發現這個問題,只會知道不能使用index索引作為key值,但是真實的根本原因并沒有搞清楚
什么情況下可以使用index作為索引
一般來說,只做資料的渲染就可以使用,并沒有什么問題
但是涉及到資料的操作,新增洗掉修改的時候就不要用了
以上僅個人理解,有錯誤的地方望指正,一起學習,一起成長!
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/310592.html
標籤：其他
上一篇：2021最新~某知名軟體服務商的前端工程師筆試題——看完你也可以進大廠（附帶答案和解題思路）
下一篇：3、Vue 筆記（axios、Vue 影片、Vue 組件、使用 this.$refs 來獲取元素和組件、Vue 組件中 data 和 props 的區別）