简单通透理解: 为什么不建议使用 index 作为 key 值
source link: https://wangdaoo.github.io/post/jian-dan-tong-tou-li-jie-wei-shi-me-bu-jian-yi-shi-yong-index-zuo-wei-key-zhi/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
今天探讨一个我们前端面试中经常会遇到的一个问题.
使用 index 作为 key 值有什么问题呢? 在我们日常开发中我们经常会和 key 值打交道. 但是我们扪心自问, 真的理解 key 吗? 我想大多数朋友可能会有些许犹豫.
初学者开发过程中, 可能很难理解 key 值存在的意义. 我们可以简单把它理解为每一条数据的唯一标识. 它与这条数据是关联在一起的. 能理解到这个地方就足够了.
那么为什么不建议使用 index 作为 key 值呢?
如图所示:
上面这个列表我们使用下标 ( index ) 作为 key 值. 其对应关系如图
此时页面显示是没有问题的, 控制台也不会报错.
但是
假设此时我们删除 List 中的第 2 项内容 (虚拟 DOM 很简单). 我们来看看会有什么效果?
能不能发现两个 List 所发生的变化?
我们仔细来看:
当我们删除了原来 list 中的 下标为 1 的数据 ( 虚拟 DOM 很简单 之后). 可以看到除了第一项数据的下标没有发生变化, 其余数据的下标都发生了变化
那么问题随之而来:
原来的数据之中:
- Diff 算法好理解 - > 2
- 文字叙述不麻烦 -> 3
- 理解起来更容易 -> 4
它们使用下标作为 key 值, 随着页面的重新渲染, key 值也发生了变化
- Diff 算法好理解 - > 1
- 文字叙述不麻烦 -> 2
- 理解起来更容易 -> 3
导致的问题就是以前的数据和重新渲染后的数据随着 key 值的变化从而没法建立关联关系. 这就失去了 key 值存在的意义. 也是导致数据出现诡异的罪魁祸首!
开发过程中, 因为我们的数据绝大部分都是从后台获取来的. 数据库中每一条数据都会一个 id . 作为唯一标识. 而这个 id 也是我们最常使用作为 key 值来源
最后说明: 一定要避免使用 index 作为 key 值得编码习惯. 切记! 切记!
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK