為什么不建議使用 index 作為 key 值

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

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

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

如圖所示:

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

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

豌豆資源搜索網站https://55wd.com 電腦刺綉綉花廠 ttp://www.szhdn.com

但是

假設此時我們刪除 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 值來源