React 中 key 的应用
key 是 React 中一个特殊的属性，在开发过程中有着重要的作用。以下是 key 在 React 中的主要应用：
1. 列表渲染时的唯一标识
React 在渲染列表元素时使用 key 来识别哪些元素发生了变化、被添加或被删除：
const todoItems = todos.map((todo) => <li key={todo.id}>{todo.text}</li>);
2. 提高渲染性能
- React 使用 key 进行高效的 DOM 差异化比较
- 有助于 React 的协调过程(Reconciliation)，减少不必要的重新渲染
- 没有正确的 key，React 可能会重新创建整个子树而不是仅更新变化部分
3. 强制组件重新渲染
通过改变 key 值，可以强制组件重新渲染（完全卸载并重新挂载）：
<Form key={formVersion} /> // 当formVersion变化时，Form组件会完全重置
4. 维护组件状态
- key 用于确定组件是否保留其状态
- 当 key 改变时，React 会创建一个新组件实例而不是更新现有实例
5. 条件渲染中的应用
在条件渲染中，key 可以帮助 React 正确识别相同位置但不同类型的组件：
{
isLoggedIn ? <Dashboard key="dashboard" /> : <LoginForm key="login" />;
}
6. key 选择的注意事项
- 使用稳定、唯一且可预测的标识符作为 key
- 避免使用索引作为 key（除非列表是静态的且不会重新排序）
- 避免在运行时动态生成 key（如使用 Math.random() 或 uuid()）
7. 常见误区和注意事项
- key 只对数组上下文中的组件有意义
- key 不会作为 props 传递给组件（要传递该值需单独设置 prop）
- 同级元素中的 key 必须唯一，不同组件树中的元素可以使用相同的 key
