你不知道的React循環渲染時爲何儘可能不要把索引設置爲key值？

問題分析

• 相信大多數童鞋在使用React的時候，特別是遍歷渲染元素的時候，都見過下面這個 Warning

index.js:1446 Warning: Each child in a list should have a unique "key" prop.

• 因此我都會習慣性的給 item 指定一個 key , 而有的時候爲了方便咱們會直接把list 的索引指定成key，可是這樣所並不被推薦，那這是爲何呢？

刨根問底

咱們知道react的執行步驟通常是：

• 用state和jsx模板生成虛擬DOM，而後用虛擬DOM生成真實的 DOM，當咱們state發生變化時,render函數執行，生成新的 虛擬DOM，而後比較新舊虛擬DOM的區別，找到區別，而後直接操做DOM，改變有區別的內容，這樣比傳統的操做DOM，極大的提高了性能。

• 而虛擬DOM的核心就是——React的diff算法，要搞清楚這個問題咱們首先要來看看 diff算法

咱們從上圖能夠看出React 在更新虛擬DOM的時候是逐層往下的，也就是說第一層div時就有出現區別，那麼對比結束，直接更新真實DOM中對應的當前節點，以此類推。

Solve the problem

• 好！ 如今咱們能夠來看看 這個key了,假設咱們在state中有一個列表[A,B,C],在遍歷渲染時用索引做爲key，那麼就是這樣的.

A 0
B 1
C 2
複製代碼

若是咱們執行一個操做，點擊刪除數組中的a， 咱們的列表就是[b,c],在遍歷渲染時仍然會用索引做爲key，結果以下:

如圖 ，咱們若是不用索引爲key , 程序能快速的對比出差別，反之也能對出差別，可是必須對比整個虛擬DOM， 這樣，程序仍然能正常執行，只不過大大消耗了新舊虛擬DOM的對比的性能，並可能致使組件狀態問題。

• 因此，把索引設置爲key值，能夠嗎？ 能夠，可是不推薦這樣作，由於會大大消耗虛擬DOM的性能