为什么你需要 React 的 key 属性
你在控制台中看到这个错误：“Each child in a list should have a unique 'key' prop.”（列表中的每个子元素都应该有一个唯一的 'key' 属性。）
许多开发者会忽略它。这是一个错误。这个警告是在提醒你潜在的性能问题和 Bug。
什么是 key 属性？ 它帮助 React 识别列表中的特定项。它告诉 React 哪个项目发生了变化、移动或被删除。如果没有 key，每当有任何变化时，React 都会重新渲染整个列表。这会降低应用的运行速度。
想象一个拥有 1000 本书的图书馆。如果你在中间插入一本新书，你必须移动其他所有的书来腾出空间。key 就像是每本书的唯一 ID。它允许 React 找到准确的位置，而无需移动其他所有内容。
Reconciliation（协调）过程 React 使用 diffing 算法来比较新的 Virtual DOM 和旧的 Virtual DOM。
- 状态发生变化。
- React 构建一棵新树。
- React 使用 key 来比较树。
- React 仅更新发生变化的元素。
常见的错误：使用数组索引（index）作为 key。
如果你的列表会发生变化，千万不要使用 key={index}。如果你添加或删除了项目，每个项目的索引都会发生偏移。React 会产生混淆，并重新渲染那些实际上并未发生变化的项。这会浪费内存并导致 UI Bug。
如何修复：
- 使用来自数据库的稳定 ID（例如
user.id）。 - 如果你的数据缺少 ID，请使用像
uuid这样的唯一字符串。 - 避免使用
Math.random()作为 key。它会在每次渲染时创建一个新的 ID，这会强制组件重新挂载（re-mount），并导致 UI 闪烁。
最佳实践：
- Key 必须是稳定的。
- Key 在兄弟节点之间必须是唯一的。
- 为了获得最佳性能，请使用数据库 ID。
Key 对比表：
• 数据库 ID：推荐。稳定且快速。
• 数组索引：不推荐。在排序或过滤时会导致 Bug。
• Math.random()：避免使用。会导致不必要的重新挂载。
工作流总结： 如果你看到了这个错误，说明你的组件缺少永久标识符。检查你的 API 响应，寻找像 email 或 ID 这样的唯一字段。修复这个问题可以减少 30-40% 的不必要重新渲染。