今天探讨一个我们前端面试中经常会遇到的一个问题.
使用 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 值来源
来自：https://wangdaoo.github.io/post/jian-dan-tong-tou-li-jie-wei-shi-me-bu-jian-yi-shi-yong-index-zuo-wei-key-zhi/
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！