具體可見：https://juejin.im/post/6844904133430870024

在react中，如果要渲染一個列表，我們會用map()函式將陣列迴圈處理然後渲染到DOM，在處理迴圈時，“key” 是一個你需要包含的特殊字串屬性。

很多時候，我們會使用當前列表的索引為key,但這樣做真的好嗎？

要討論這個問題，我們要從react的原理說起，我們react的執行步驟一般是：用state和jsx模板生成虛擬DOM，然後用虛擬DOM生成真實的 DOM，當我們state發生變化時,render函式執行，生成新的 虛擬DOM，然後比較新舊虛擬DOM的區別，找到區別，然後直接操作DOM，改變有區別的內容，這樣比傳統的操作DOM，極大的提升了效能。

再說虛擬DOM，虛擬DOM其實就是一個JS物件(['div',{class:'app'},'item']),虛擬DOM核心之一是diff演算法，diff演算法的核心之一是同層對比，如圖：

如果在第一層div時就有出現區別，那麼對比結束，直接更新真實DOM中對應的當前節點，以此類推。。。

再說說key,假設我們在state中有一個列表[a,b,c],在遍歷渲染時用索引作為key，那麼就是這樣：

a 0
b 1
c 2

如果我們執行一個操作，點選刪除陣列中的a， 我們的列表就是[b,c],在遍歷渲染時仍然會用索引作為key，結果如下:

b 0
c 1

如圖 ，我們如果不用索引為key , 程式能快速的對比出差異，反之也能對出差異，但是必須對比整個虛擬DOM，
這樣，程式仍然能正常執行，只不過大大消耗了新舊虛擬DOM的對比的效能，並可能導致元件狀態問題。