vue、react中循環遍歷為什么會有key，key有什么作用？

先講一下，vue和react都是在操作虛擬dom，並且根據diff算法進行新舊dom對比，從而更新dom，以vue舉例：

vue官方文檔中寫到有

key 的特殊屬性主要用在 Vue 的虛擬 DOM 算法，在新舊 nodes 對比時辨識 VNodes。如果不使用 key，Vue 會使用一種最大限度減少動態元素並且盡可能的嘗試修復/再利用相同類型元素的算法。使用 key，它會基於 key 的變化重新排列元素順序，並且會移除 key 不存在的元素。

什么意思呢？就是說，key值的存在保證了唯一性，可以用於dom的重新渲染或是就地復用。

舉例來講：

<div id="app">
    <div v-for="i in dataList">{{ i }}</div>
</div>

var vm = new Vue({
  el: '#app',
  data: {
    dataList: [1, 2, 3, 4, 5]
  }
})

以上例子會渲染出5個dom節點，我們分別給每個增加一個id值，也就是key，如下：

[
    '<div>1</div>', // id： A
    '<div>2</div>', // id:  B
    '<div>3</div>', // id:  C
    '<div>4</div>', // id:  D
    '<div>5</div>'  // id:  E
  ]

我們改變listdata的數據使dom進行變化

vm.dataList = [4, 1, 3, 5, 2] // 數據位置替換

 // 沒有key的情況， 節點位置不變，但是節點innerText內容更新了
  [
    '<div>4</div>', // id： A
    '<div>1</div>', // id:  B
    '<div>3</div>', // id:  C
    '<div>5</div>', // id:  D
    '<div>2</div>'  // id:  E
  ]

  // 有key的情況，dom節點位置進行了交換，但是內容沒有更新
  // <div v-for="i in dataList" :key='i'>{{ i }}</div>
  [
    '<div>4</div>', // id： D
    '<div>1</div>', // id:  A
    '<div>3</div>', // id:  C
    '<div>5</div>', // id:  E
    '<div>2</div>'  // id:  B
  ]

vue在執行時，會對節點進行檢查，如果沒有key值，那么，vue檢查到這里有dom節點，則會對內容進行清空，並且賦予新值；如果有key值的存在，那么vue會對oldnode和newnode進行對比，發現兩者key值是否相同，進行調換位置或是刪除操作。

基於上述說法，不得不說，編寫key值和不編寫key值在時間上一定會有所差異（有key值的速度相對慢，但屬於用戶無法感知到），但時間上的快慢不屬於key值的作用。

key值的作用是：

更精准-->在虛擬dom節點中賦予key值，會更加快速的拿到需要的目標節點，不會造成就地復用的情況，對於節點的把控更加精准。