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:
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.
ExampleLet"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.
AnalyzeIt 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.
ConclusionIt"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.
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/101321.html
摘要:概述主要来存放键值对。之前使用数组链表的形式,之后进行了改变,使用了数组链表或者红黑树的形式。如果为,则按照字段中保存的初始容量进行分配。并且之前在中的元素应呆在原处或者移动到倍位置处。 概述 HashMap主要来存放键值对。JDK1.8之前使用数组+链表的形式,JDK1.8之后进行了改变,使用了数组+链表或者红黑树的形式。 小概念普及 关系运算简介 0 0 0 1 1 1 ...
摘要:周四声称,输错命令导致了亚马逊网络服务出现持续数小时的故障事件。太平洋标准时上午,一名获得授权的团队成员使用事先编写的,执行一条命令,该命令旨在为计费流程使用的其中一个子系统删除少量服务器。 AWS解释了其广大US-EAST-1地理区域的S3存储服务是如何受到中断的,以及它在采取什么措施防止这种情况再次发生。 AWS周四声称,输错命令导致了亚马逊网络服务(AWS)出现持续数小时的故障事件。这...
摘要:为了更贴近作者的实现意图,以及中每个类的功能特点,决定从源码的注释中和实现来窥探其真谛。注意,迭代器本身的行为不能被保证,通常来说,在非线程安全的并发修改存在的情况下,不可能做任何硬性的保证。迭代器的机制抛出是最佳的处理方式。 纸上得来终觉浅,绝知此事要躬行。 为了更贴近作者的实现意图,以及JDK中每个类的功能特点,决定从源码的注释中和实现来窥探其真谛。字斟句酌、查缺补漏;顺带提高英...
摘要:摘要添加了表达式闭包和特性支持,包括方法的引用,增强类型推断,和虚拟扩展方法。围绕的语言功能支持包括虚拟扩展方法,这将使接口的源代码和二进制兼容的方式演变升级。 Author:Joseph D. Darcy Organization:Oracle Owner:Brian Goetz Created:2011/11/1 Updated:2013/2/21 Type:Feature Sta...
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...
阅读 2960·2023-04-26 00:23
阅读 3373·2021-09-13 10:28
阅读 2131·2021-08-31 14:18
阅读 2836·2019-08-30 15:54
阅读 1870·2019-08-30 15:43
阅读 1235·2019-08-29 16:56
阅读 2780·2019-08-29 14:16
阅读 2028·2019-08-28 17:51