简单通透理解: 为什么不建议使用 index 作为 key 值

栏目: IT技术 · 发布时间: 4年前

内容简介:今天探讨一个我们前端面试中经常会遇到的一个问题.使用初学者开发过程中, 可能很难理解

今天探讨一个我们前端面试中经常会遇到的一个问题.

使用 index 作为 key 值有什么问题呢? 在我们日常开发中我们经常会和 key 值打交道. 但是我们扪心自问, 真的理解 key 吗? 我想大多数朋友可能会有些许犹豫.

初学者开发过程中, 可能很难理解 key 值存在的意义. 我们可以简单把它理解为每一条数据的唯一标识. 它与这条数据是关联在一起的. 能理解到这个地方就足够了.

那么为什么不建议使用 index 作为 key 值呢?

简单通透理解: 为什么不建议使用 index 作为 key 值

如图所示:

上面这个列表我们使用下标 ( index ) 作为 key 值. 其对应关系如图

此时页面显示是没有问题的, 控制台也不会报错.

但是

假设此时我们删除 List 中的第 2 项内容 (虚拟 DOM 很简单). 我们来看看会有什么效果?

简单通透理解: 为什么不建议使用 index 作为 key 值

能不能发现两个 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 值来源

最后说明: 一定要避免使用 index 作为 key 值得编码习惯. 切记! 切记!


以上所述就是小编给大家介绍的《简单通透理解: 为什么不建议使用 index 作为 key 值》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

数字民主的迷思

数字民主的迷思

[美] 马修·辛德曼 / 唐杰 / 中国政法大学出版社 / 2015-12-25 / CNY 39.00

马修·辛德曼著的《数字民主的迷思》主要讨论互联网对美国政治的影响,聚焦的是“民主化”这一课题。针对公众关于网络民主的美好想象与过分狂热,它通过对在线竞选、链接结构、流量模式、搜索引擎使用、博客与博主、内容生产的“规模经济”等主题的深入处理,借助大量数据图表与分析,勾勒出互联网政治的种种局限性。尤其表明,网络政治信息仍然为一小群精英与机构所创造和过滤,在网络的每一个层次和领域都仍然遵循着“赢家通吃”......一起来看看 《数字民主的迷思》 这本书的介绍吧!

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具