Vue和React中的key作用

React和Vue中的key都有提高渲染效率的目的，但是这句话也不是一定的

假设我们有如下顺序的节点

<div>A</div>//	A DOM
<div>B</div>// 	B DOM
<div>C</div>// 	C DOM
<div>D</div>// 	D DOM

如果现在需要在B C之间添加E节点，现在有两种情况，添加key和不添加key

不添加key，渲染节点时会采用就地复用的策略（也是diff算法默认的一个高效策略：避免不必要的重复渲染）

<div>A</div>//	A DOM
<div>B</div>// 	B DOM
<div>E</div>// 	C DOM
<div>C</div>// 	D DOM
<div>D</div>//  新DOM

可以看到，不一定就是使用key就有提高diff算法效率的目的，反而不添加key，就地复用才是官方考虑到的一个提高效率的因素；

另外就是不要使用index作为key值，因为进行插入、删除等，index也会随着相应的改变，现有如下例子，我们将id作为key值查看

假设也是如下节点顺序

A B C D

现在也要在 B C之间插入E节点，如果使用index作为key值的话，插入前A B C D分别对应key 0 1 2 3
,插入后A B C D对应key应该变为了0 1 3 4了，那么C D与之间的C Dkey值不同，diff 算法不认为其是相同的节点，那么就不能复用，加上插入的E需要更新三个节点。，建议使用唯一的ID就不会出现这种情况了

另外一提，Vue源码中判断两个节点是否相等，首先就是判断两个节点的key是否相等

// 判断节点是否相同
function sameVnode (a, b) {
  return (
    a.key === b.key && (
      (
        a.tag === b.tag &&
        a.isComment === b.isComment &&
        isDef(a.data) === isDef(b.data) &&
        sameInputType(a, b)
      ) || (
        isTrue(a.isAsyncPlaceholder) &&
        a.asyncFactory === b.asyncFactory &&
        isUndef(b.asyncFactory.error)
      )
    )
  )
}