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

在 React / Vue 项目中，列表组件中写 key 的原因是为了提高渲染效率和准确性，其作用主要体现在以下两个方面：

提高渲染效率：
唯一标识：key 是给每一个 vnode（虚拟节点）的唯一 id。在虚拟 DOM 的 diff 算法中，key 的存在可以使得算法在对比新旧虚拟节点时，能够更快地定位到需要更新或删除的节点。
快速查找：利用 key 的唯一性，可以生成一个 map 对象来存储和快速查找对应的节点。这种方式比遍历整个列表来查找节点要高效得多，特别是在处理大型列表时，性能提升尤为明显。
保证渲染准确性：
避免就地复用：在 React 和 Vue 的虚拟 DOM diff 算法中，如果没有 key 或者 key 不唯一，算法可能会采用就地复用（in-place patch）的策略来更新节点。这意味着，即使两个节点的内容不同，只要它们在同一位置，算法就可能会直接更新该节点的内容，而不是移动或删除节点。这种行为在某些情况下可能会导致渲染结果不正确。
准确匹配：通过为列表中的每个节点指定唯一的 key，可以确保在 diff 算法中，新旧虚拟节点能够准确匹配。这样，算法就可以根据 key 的值来决定是更新、移动还是删除节点，从而确保渲染结果的正确性。

总结：

因此，在开发 React / Vue 项目时，应该始终记得为列表组件中的每个节点指定唯一的 key。

热门标签