沐鳴登錄網站_為什麼不建議使用 index 作為 key 值

今天探討一個我們前端面試中經常會遇到的一個問題.
使用 index 作為 key 值有什麼問題呢? 在我們日常開發中我們經常會和 key 值打交道. 但是我們捫心自問, 真的理解 key 嗎? 我想大多數朋友可能會有些許猶豫.

初學者開發過程中, 可能很難理解 key 值存在的意義. 我們可以簡單把它理解為每一條數據的唯一標識. 它與這條數據是關聯在一起的. 能理解到這個地方就足夠了.

那麼為什麼不建議使用 index 作為 key 值呢?

如圖所示:

上面這個列表我們使用下標 (index) 作為 key 值. 其對應關係如圖

此時頁面显示是沒有問題的, 控制台也不會報錯.

但是

假設此時我們刪除 List 中的第 2 項內容 (虛擬 DOM 很簡單). 我們來看看會有什麼效果?

能不能發現兩個 List 所發生的變化?

我們仔細來看:

當我們刪除了原來 list 中的下標為 1 的數據 (虛擬 DOM 很簡單 之後). 可以看到除了第一項數據的下標沒有發生變化, 其餘數據的下標都發生了變化

那麼問題隨之而來:

原來的數據之中:

  1. Diff 算法好理解 – > 2
  2. 文字敘述不麻煩 -> 3
  3. 理解起來更容易 -> 4

它們使用下標作為 key 值, 隨着頁面的重新渲染, key 值也發生了變化

  1. Diff 算法好理解 – > 1
  2. 文字敘述不麻煩 -> 2
  3. 理解起來更容易 -> 3

導致的問題就是以前的數據和重新渲染后的數據隨着 key 值的變化從而沒法建立關聯關係. 這就失去了 key 值存在的意義. 也是導致數據出現詭異的罪魁禍首!

開發過程中, 因為我們的數據絕大部分都是從後台獲取來的. 數據庫中每一條數據都會一個 id . 作為唯一標識. 而這個 id 也是我們最常使用作為 key 值來源

來自:https://wangdaoo.github.io/post/jian-dan-tong-tou-li-jie-wei-shi-me-bu-jian-yi-shi-yong-index-zuo-wei-key-zhi/

站長推薦

1.雲服務推薦: 國內主流雲服務商,各類雲產品的最新活動,優惠券領取。地址:阿里雲騰訊雲華為雲

2.廣告聯盟: 整理了目前主流的廣告聯盟平台,如果你有流量,可以作為參考選擇適合你的平台點擊進入

鏈接: http://www.fly63.com/article/detial/8592