为什么你需要 React 的 key 属性
你会在控制台中看到这样的警告：“Each child in a list should have a unique 'key' prop.”
许多开发者会忽略它。这是一个错误。key 属性不仅仅是一个警告，它还是提升性能和防止 Bug 的工具。
key 属性的作用是什么？
React 使用 key 来标识列表项。它告诉 React 哪个项目发生了变化、移动或被移除。
如果没有 key，React 必须重新渲染整个列表。这会降低应用的运行速度并导致数据 Bug。
图书馆示例
想象一个拥有 1,000 本书的图书馆。如果你在中间插入一本新书，你必须移动其他所有的书来腾出空间。
在 React 中，key 充当唯一 ID。它赋予每个元素一个身份。在协调（reconciliation）过程中，React 会将新列表与旧列表进行比较。
缺失 key 的问题
如果你跳过了 key，React 会认为每个项目都是相同的。如果你在开头添加一个项目，React 会认为整个列表都发生了变化。它会在 DOM 中重新创建每一个元素。这会浪费内存和 CPU。
索引陷阱
新手开发者经常使用数组索引作为 key。
示例：key={index}
这对于动态列表来说是非常危险的。如果你对项目进行排序、过滤或删除，索引就会发生变化。这会导致 UI 状态错误并产生 Bug。
Key 的最佳实践
- 使用来自数据库的稳定 ID（例如
user.id）。 - 确保 key 在兄弟节点之间是唯一的。
- 避免使用
Math.random()作为 key。它在每次渲染时都会改变，并导致 UI 闪烁。 - 如果你的数据缺少 ID，请在获取数据时使用
uuid或nanoid生成一个。
Key 选择指南
• 数据库 ID：最佳。高度稳定且快速。
• 数组索引：仅用于永远不会改变的静态列表。
• Math.random()：避免使用。它会强制进行不必要的重新挂载（re-mounts）。
总结
一个好的 key 能让你的应用运行得更快。它可以减少高达 40% 的不必要重新渲染。请务必优先使用稳定且唯一的标识符。