关于javascript:React-Vue-项目时为什么要在列表组件中写-Key其作用是什么

key 是给每一个 vnode 的惟一 id, 能够依附 key, 更精确, 更快的拿到 oldVnode 中对应的 vnode 节点。

1. 更精确

因为带 key 就不是就地复用了，在 sameNode 函数 a.key === b.key 比照中能够防止就地复用的状况。所以会更加精确。

1. 更快

利用 key 的唯一性生成 map 对象来获取对应节点，比遍历形式更快。

vue 和 react 都是采纳 diff 算法来比照新旧虚构节点，从而更新节点。在穿插比照中，当新节点跟旧节点头尾穿插比照没有后果时，会依据新节点的 key 去比照旧节点数组中的 key，从而找到相应旧节点（这里对应的是一个 key => index 的 map 映射）。如果没找到就认为是一个新增节点。而如果没有 key，那么就会采纳遍历查找的形式去找到对应的旧节点。一种一个 map 映射，另一种是遍历查找。相比而言。map 映射的速度更快。

不带有 key，并且应用简略的模板，基于这个前提下，能够更无效的复用节点，diff 速度来看也是不带 key 更加疾速的，因为带 key 在增删节点上有耗时。这就是 vue 文档所说的默认模式。然而这个并不是 key 作用，而是没有 key 的状况下能够对节点就地复用，进步性能。这种模式会带来一些暗藏的副作用，比方可能不会产生过渡成果，或者在某些节点有绑定数据（表单）状态，会呈现状态错位。VUE 文档也阐明了。还有就是 key 的作用是为了在 diff 算法执行时更快的找到对应的节点，进步 diff 速度，然而这个含有争议。

整顿来自木易杨
key 的作用