The impacts of using index as key in React

Hydrogen 发布于2019-08-23 14:54 / 367人阅读

Let"s say there"s a list that you want to show in React, and some developers may use index as key to avoid the warning of React, like this:


  {list.map((item, index) =>
    {item.name}
  )}

Sure, you can do that, but it"s a bad idea. Let"s see what official said:

We don’t recommend using indexes for keys if the order of items may change. This can negatively impact performance and may cause issues with component state.

But how does the key work? Don"t worry, this is what I want to talk about next.

Example

Let"s start with a example to figure out what the difference between using index and using unique id.

Here is the example.

we render 2 different list initially and every item has a uncontrollable input. There are also some buttons on top which we can insert or delete items, each new item will be colored.

push: insert a item at the end of list

unshift: insert a item at the start of list

spliceInsert: insert a item at the middle of list

The left side represents list with index-key, the right side represents list with unique-key.

As we can see from pictures, there seems to be something wrong on the left side. It got confused about which item belonged to which dom.

Analyze

It will reuse the dom that already exist if their key are the same, that"s the role of key. For more detail, here is the source code.

For the sake of understanding, I"ll explain it in a case.

An array of length 5, I want to insert an item in 3rd position. when it comes to index of [0, 1], it"s okay to reuse the existing doms. But when it comes to index of 2, it also reuses the existing dom because of same key. Besides, their state is different so the children of dom[2] will be updated. Next, index of 3 reuses dom[4] and so on.

It may cause terrible performance if list is long enough. If you insert a item at the start of list, it"ll insert a dom at the end and update children all of item. But with unique id, it just insert a dom at the start.

Conclusion

It"s a bad idea to use the array index since it doesn"t uniquely identify your elements. In cases where the array is sorted or an element is added to the beginning of the array, the index will be changed even though the element representing that index may be the same. This results in unnecessary renders.

If you have to use index as key, please make sure you only operate the last item.

云服务器服务器托管 the impacts Impact impact vps

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101321.html

JDK1.8的HashMap部分源码解析

摘要：概述主要来存放键值对。之前使用数组链表的形式，之后进行了改变，使用了数组链表或者红黑树的形式。如果为，则按照字段中保存的初始容量进行分配。并且之前在中的元素应呆在原处或者移动到倍位置处。概述 HashMap主要来存放键值对。JDK1.8之前使用数组+链表的形式，JDK1.8之后进行了改变，使用了数组+链表或者红黑树的形式。小概念普及关系运算简介 0 0 0 1 1 1 ...

DandJ 2019-08-16 17:37 评论0 收藏0
AWS S3 挂掉原因：程序员输错字母，误删服务器，故障4小时！

摘要：周四声称，输错命令导致了亚马逊网络服务出现持续数小时的故障事件。太平洋标准时上午，一名获得授权的团队成员使用事先编写的，执行一条命令，该命令旨在为计费流程使用的其中一个子系统删除少量服务器。 AWS解释了其广大US-EAST-1地理区域的S3存储服务是如何受到中断的，以及它在采取什么措施防止这种情况再次发生。 AWS周四声称，输错命令导致了亚马逊网络服务（AWS）出现持续数小时的故障事件。这...

MarvinZhang 2019-04-25 17:45 评论0 收藏0
源码注释解读—HashMap

摘要：为了更贴近作者的实现意图，以及中每个类的功能特点，决定从源码的注释中和实现来窥探其真谛。注意，迭代器本身的行为不能被保证，通常来说，在非线程安全的并发修改存在的情况下，不可能做任何硬性的保证。迭代器的机制抛出是最佳的处理方式。纸上得来终觉浅，绝知此事要躬行。为了更贴近作者的实现意图，以及JDK中每个类的功能特点，决定从源码的注释中和实现来窥探其真谛。字斟句酌、查缺补漏；顺带提高英...

Yumenokanata 2019-08-19 11:01 评论0 收藏0
Java8 新特性：Lambda表达式和虚拟扩展方法标注

摘要：摘要添加了表达式闭包和特性支持，包括方法的引用，增强类型推断，和虚拟扩展方法。围绕的语言功能支持包括虚拟扩展方法，这将使接口的源代码和二进制兼容的方式演变升级。 Author：Joseph D. Darcy Organization：Oracle Owner：Brian Goetz Created：2011/11/1 Updated：2013/2/21 Type：Feature Sta...

UsherChen 2019-08-14 16:02 评论0 收藏0
EHCache 缓存的应用及选择

http://www.ehcache.org/docume... Ehcache Tiering Options CURRENTIntroductionEhcache supports the concept of tiered caching. This section covers the different available configuration options. It also e...

Sike 2019-08-16 10:42 评论0 收藏0