The impacts of using index as key in React

Hydrogen 發布于2019-08-23 14:54 / 486人閱讀

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.

云服務器 GPU云服務器 the impacts Impact impact vps

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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