写 React / Vue 项目时为什么要在列表组件中写 key，其作用是什么？

key的作用就是给每一个VNode一个唯一的key，通过key可以更准确更快的拿到VNode。

vue和react都是采用diff算法来对比新旧虚拟节点，从而更新节点。当新节点跟旧节点头尾交叉对比没有结果时，会根据新节点的key去对比旧节点数组中的key，从而找到相应的旧节点。如果没找到就认为是一个新增节点。而如果没有key，那么就会采用遍历查找的方式去找到对应的旧节点。

在不带key的情况下，节点可以进行复用，省去了操作DOM的开销，只适用于简单的无状态组件的渲染。虽然带上唯一的key会增加开销，但是能保证组件的状态正确，而且用户基本感受不到差距。