key 这个东西，你可能一开始只是为了消掉 React 的 warning 才加上去的。

但它其实会直接影响“列表更新时组件怎么复用”。用对了，你的输入框不会串行、展开态不会乱跳；用错了（尤其是用 index），有些 bug 会特别诡异：看起来像状态乱了，但其实是组件被 React 复用错了。

key 的作用

1. 唯一标识每个列表项

当你通过循环渲染一个列表时，每个列表项都需要一个独一无二的标识符，这就是 key 的作用。通过 key，框架能够准确地识别出每个元素，确定它们在数据更新时的变化。

例如，在 React 中，key 用于帮助虚拟 DOM 快速判断哪些元素发生了改变、哪些需要重新渲染或移除，从而提高页面更新的性能。

2. 保持组件状态

使用正确的 key，可以确保在列表项发生增删或重新排序时，各个组件的内部状态能够正确地保留和复用。例如，如果你有一个表单组件列表，使用唯一的 key 能保证当用户在一个输入框中输入内容后，列表重新排序时，输入框中的数据不会错误地传递到其他组件上。

为什么不推荐使用 index 作为 key？

1. 列表项顺序不稳定

当列表项的顺序发生变化时（例如新增、删除或重新排序），使用 index 作为 key 可能会导致 React 不能正确地识别每个元素。因为数组索引只是相对于当前列表顺序的标识，一旦顺序发生变化，之前的索引对应关系就不再准确，这就会引起组件的错误复用和重新渲染。

2. 组件状态错乱

如果一个组件中含有用户输入或其他动态状态，使用 index 作为 key，当列表顺序改变时，可能会导致组件状态的混乱。例如，假设你有一个 todo 列表，每个列表项包含一个输入框用于编辑任务内容。如果使用 index 作为 key，当用户在列表中间插入一个新的任务时，后面的输入框可能会错乱，从而导致用户输入的数据错误地映射到其他任务上。

3. 性能和调试难度增加

使用 index 作为 key 还可能导致性能问题，因为框架在更新过程中无法准确判断哪些元素需要更新，从而进行不必要的重渲染。此外，在调试时，如果 key 使用不当，可能会导致难以追踪的组件状态错误，增加调试成本。

推荐的最佳实践

（这里主要以 React 的心智模型来解释，但结论对 Vue/其他虚拟 DOM 框架也差不多）

3.1 使用稳定且唯一的标识符

最理想的做法是使用数据中自带的唯一标识符（如数据库的 id）作为 key。例如：

1
2
3
{todoList.map(todo => (
  <TodoItem key={todo.id} {...todo} />
))}

这种方式确保每个列表项在数据更新、排序或删除时都有稳定的标识，便于框架高效地更新组件。

3.2 考虑业务逻辑与数据结构

如果数据中没有明显的唯一标识符，可以考虑生成唯一的哈希值或者采用其他稳定的标识方式。切忌使用随机数，因为随机值在每次渲染时都会变化，无法保证稳定性。

3.3 针对特殊场景调整

对于某些场景，列表项顺序可能确实固定且不会变化，此时使用 index 作为 key 可能不会立即引起问题，但为了代码的健壮性和可维护性，仍推荐使用更稳定的标识符。

总结

  • key 的作用：为列表中每个项提供唯一标识，帮助框架在更新时高效地匹配 DOM 节点，保持组件状态。

  • 为何不使用 index：使用 index 可能导致列表项顺序变化时出现组件状态混乱、错误复用和性能问题。

  • 最佳实践：使用数据中稳定且唯一的标识符作为 key，确保组件正确更新和高效渲染。

通过正确理解和使用 key，不仅能提高页面的性能，还能减少因为错误更新导致的 bug，使你的代码更加健壮和易于维护。

Happy Coding!