react useId 作用是什么

useId 是 React 18 引入的一个 Hook，主要用于在服务端渲染（SSR）和客户端渲染（CSR）之间生成稳定的、唯一的 ID，以确保在 SSR 和 CSR 过程中生成的 ID 一致，避免 hydration（水合）错误。

🎯 作用总结：

• 生成唯一的 ID，常用于需要唯一标识符的场景（如表单的 id / htmlFor 配对）。
• 保证 SSR 和 CSR 生成的 ID 一致，避免 React 在客户端 hydration 阶段因 ID 不一致而报错或重新渲染。

✨ 常见使用场景：

import { useId } from 'react';

function Checkbox({ label }) {
  const id = useId(); // 自动生成唯一 ID

  return (
    <div>
      <input type="checkbox" id={id} />
      <label htmlFor={id}>{label}</label>
    </div>
  );
}

如果没有 useId，你可能会手动写 Math.random() 或 Date.now()，但这些在 SSR 和 CSR 中会不一致，导致 hydration 警告或错误。

⚠️ 注意事项：

• useId 生成的 ID 是基于组件在 React 树中的位置，而不是随机的，因此在相同位置渲染时 ID 是稳定的。
• 不要用于生成列表项的 key（应该用数据本身的唯一 ID）。
• 如果你需要在多个元素间共享同一个 ID 前缀，可以使用 id={id + '-label'} 这种方式。

🌐 服务端 vs 客户端一致性示例：

假如你在服务端渲染时生成 ID 为 "id123"，客户端 hydration 时如果生成的是 "id456"，React 会认为 DOM 不匹配，抛出警告：

"Warning: Prop 'id' did not match. Server: 'id123' Client: 'id456'"

useId 正是为了解决这类问题而设计。

✅ 总结：

| 问题 | useId 的解决方案 |
|------|------------------|
| 需要唯一 ID（如 label / input） | ✅ 自动生成 |
| SSR + CSR ID 不一致 | ✅ 保证一致性 |
| 避免 hydration 错误 | ✅ 安全可靠 |

📌 React 官方建议：只要你的应用涉及 SSR（如 Next.js），且需要生成唯一 ID，就应使用 useId 而不是自己造轮子。

如需了解更多，可参考 React 官方文档 - useId。