精通 React 列表与 Key
在 React 中渲染列表很简单，但要做到正确却很难。
许多开发者使用数组索引（index）作为 key。这是一个错误，会导致 Bug 并降低性能。
以下是在 React 中处理动态数据的正确方式。
React 如何使用列表
React 使用 map() 方法将数组转换为 UI 元素。当你使用 map() 时，React 会将每一条数据转换为一个组件。
Key 的作用
React 使用 Virtual DOM。当数据发生变化时，React 会将新数据与旧数据进行比较。这个过程被称为 reconciliation（协调）。
Key 起到了唯一标识符的作用。它们能准确地告诉 React 哪个项目发生了变化、移动或被删除。
为什么使用索引作为 Key 是危险的
使用索引（0, 1, 2...）作为 key 会导致三个主要问题：
- 组件状态错误：如果你对列表进行排序，输入框或复选框可能会显示错误项目的数据。
- 性能下降：React 无法追踪具体是哪个项目发生了变化。它通常会重新渲染整个列表，而不是仅重新渲染单个项目。
- 视觉 Bug：你的 UI 看起来可能没问题，但当项目发生位移时，内部逻辑会失效。
使用 Key 的正确方式
为了保持应用的快速和稳定，请遵循以下规则：
- 使用唯一 ID：始终使用来自数据库的 ID（例如 UUID 或主键）。
- 绝不要使用
Math.random()：在渲染期间生成 key 会导致 React 在每次更新时都重新创建每一个元素。这会严重破坏性能。 - 保持 Key 的稳定性：对于同一条数据，其 key 在整个生命周期内必须保持不变。
对比一览表
特性：稳定性 使用索引：不稳定 使用唯一 ID：高度稳定
特性：性能 使用索引：差 使用唯一 ID：最优
特性：状态安全性 使用索引：不安全 使用唯一 ID：100% 安全
开发者总结
使用 map() 方法。将唯一且稳定的 ID 传递给 key 属性。对于任何可以发生变化、排序或过滤的列表，请避免使用数组索引。