react 遍历渲染节点列表 为什么要加 key ?

Question

在 React 中，当我们使用数组渲染节点列表时，通常需要给每个节点添加一个 key 属性，这是因为 React 需要通过 key 属性来判断是否需要更新某个节点，从而提高渲染性能。

具体来说，React 在进行更新时，会根据 key 属性来判断哪些节点需要更新，哪些节点需要删除，哪些节点需要新增。如果两个节点的 key 值相同，则 React 认为它们是同一个节点，会尝试进行复用，否则会销毁旧节点并创建新节点。如果没有 key 属性，React 无法判断哪些节点是同一个节点，就需要进行全量更新，这会导致性能下降。

另外，添加 key 属性还可以解决一些潜在的问题。例如，当我们通过 map 函数生成节点列表时，如果没有给节点添加 key 属性，当列表中的某个节点发生变化时，可能会导致其他节点的 props 或状态也被重置。如果给每个节点添加了唯一的 key 属性，就可以避免这种问题。

因此，总的来说，为节点列表添加 key 属性可以提高渲染性能，并避免潜在的问题。