面试题：React 的 keys 是否需要设置为全局唯一？为什么？

不需要。React 中的 key 不需要设置为全局唯一，只需要在当前的兄弟节点（siblings）范围内唯一即可。

为什么只需要在兄弟节点中唯一？

React 在进行 reconciliation（协调）过程时，会比较同一层级的子元素列表。key 的作用是帮助 React 识别哪个子元素被添加、删除或移动。

• 比较范围：React 只会在同一个父组件渲染出的子元素数组中比较 key。
• 局部作用域：只要在同一个 map 或数组中，每个元素的 key 不重复，React 就能正确追踪它们的身份。

示例说明

function App() {
  const users = [
    { id: 1, name: 'Alice' },
    { id: 2, name: 'Bob' }
  ];

  const products = [
    { id: 1, name: 'Laptop' },
    { id: 2, name: 'Phone' }
  ];

  return (
    <div>
      {/* 用户列表：key 在此列表中唯一即可 */}
      <ul>
        {users.map(user => (
          <li key={user.id}>{user.name}</li> {/* key: 1, 2 */}
        ))}
      </ul>

      {/* 产品列表：key 在此列表中唯一即可 */}
      <ul>
        {products.map(product => (
          <li key={product.id}>{product.name}</li> {/* key: 1, 2 */}
        ))}
      </ul>
    </div>
  );
}

在这个例子中：

• 两个列表都使用了 id 作为 key，并且都出现了 key={1} 和 key={2}。
• 这是完全正确的，因为每个 key 只在自己的兄弟节点列表中需要唯一。
• React 不会将用户列表中的 key={1} 和产品列表中的 key={1} 混淆，因为它们属于不同的父元素（不同的 <ul>）。

---

如果 key 不唯一会发生什么？

如果在同一个列表中 key 重复，React 会发出警告，并可能导致：

1. 渲染错误：组件状态错乱。
2. 性能下降：React 无法正确复用组件实例，导致不必要的重新渲染。
3. 行为异常：例如，输入框的值可能出现在错误的项上。

// ❌ 错误：同一个列表中 key 重复
const items = [
  { id: 1, text: 'Item 1' },
  { id: 1, text: 'Item 2' } // 重复的 id
];

// 渲染时，React 会警告，并可能只渲染一个项或行为异常
const list = items.map(item => (
  <div key={item.id}>{item.text}</div>
));

---

最佳实践

1. 使用稳定、可预测的 ID： 优先使用数据本身的唯一 ID（如数据库 ID）。
2. 避免使用数组索引作为 key： 除非列表是静态的（不排序、不筛选、不增删）。
3. 不要为了“全局唯一”而过度设计： 不需要使用 Symbol()、Math.random() 或 UUID 来生成 key，除非数据本身没有稳定 ID。这会破坏组件复用。

---

总结

问题	答案
key 是否需要全局唯一？	❌ 不需要
key 需要在什么范围内唯一？	✅ 只需在同一父组件下的兄弟节点中唯一
为什么？	React 只在同级元素列表中通过 key 进行 diff 比较
最佳实践	使用数据的稳定唯一 ID 作为 key

记住：key 是 React 用于同级元素对比的“局部身份证”，不是全局唯一的标识符。