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

3次阅读

共计 620 个字符,预计需要花费 2 分钟才能阅读完成。

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 的作用

正文完
 0