使用for循环渲染时为什么不要将key值设为index？

无论是Vue的v-for还是React的数组渲染，它们都要求设置一个key值，它默认用“就地复用”策略，方便了diff算法更高效的比对dom元素。
那为什么不推荐使用index作为key值呢？因为它可能会导致dom操作次数增多，从而拉低性能。

以React的JSX语法为例

const arr = ['a', 'b', 'c'];
//key值设为元素本身
const newArr = arr.map( item => {
  return <p key={item}>{item}</p>
})

在上面例子中，渲染出来的效果如下所示

<p>a</p>    key值 -> a
<p>b</p>    key值 -> b
<p>c</p>    key值 -> c

如果此时打乱数组，则会进行重新渲染，而diff算法则会进行比对，它会根据key值去对新旧元素进行比对，如果dom元素被改动的话，则会进行重新渲染，删除之前的旧元素将新的元素放进去。

上面例子中，通过diff算法比对，发现key值所对应的dom元素没有变化，此时同样的只需变换一下元素排列顺序就可以了。

<p>c</p>    key值 -> c
<p>b</p>    key值 -> b
<p>a</p>    key值 -> a

而如果将key值设置为index索引值会怎么样呢？

<p>a</p>    key值 -> 0
<p>b</p>    key值 -> 1
<p>c</p>    key值 -> 2

打乱数组顺序后，重新渲染，会发现key值并不会跟随元素去进行变动

<p>c</p>    key值 -> 0
<p>b</p>    key值 -> 1
<p>a</p>    key值 -> 2

通过key值去比对，会发现a,b元素和之前的是不一样的，此时则会将这两个元素删除，再重新进行生成元素。

通过对比发现，将key值设置为index会增加dom操作次数，所以最好不要将index设置为key值。