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

Question

key 的作用是更新组件时 判断两个节点是否相同 。相同就复用，不相同就删除旧的创建新的。

带唯一 key 时，如果新旧节点 key 不一样，不但要销毁和创建 vnode，在 DOM 里添加移除节点对性能的影响更大。所以会才说“不带 key 可能性能更好”。但是这种模式只适用于 渲染简单的无状态组件 。

举个例子：

一个新闻列表，可点击列表项来将其标记为"已访问"，可通过 tab 切换“娱乐新闻”或是“社会新闻”。

不带 key 属性的情况下，在“娱乐新闻”下选中第二项然后切换到“社会新闻”，"社会新闻"里的第二项也会是被选中的状态，因为这里复用了组件，保留了之前的状态。要解决这个问题，可以为列表项带上新闻 id 作为唯一 key，那么每次渲染列表时都会完全替换所有组件，使其拥有正确状态。