学习React-20-useId

LFly_ice2025-09-30 13:57

useId 的基本概念

useId 是 React 18 引入的一个 Hook，用于生成唯一的 ID。它的主要用途是为无障碍访问（a11y）和表单元素提供稳定且唯一的 ID，避免服务端和客户端渲染时 ID 不匹配的问题。

useId 的语法

javascript 复制代码

const id = useId();

调用 useId 会返回一个唯一的字符串 ID，格式类似于 :r1:、:r2: 等。这个 ID 在服务端和客户端渲染时保持一致，避免了 hydration 不匹配的问题。

useId 的使用场景

为表单元素生成唯一 ID

javascript 复制代码

function Checkbox() {
  const id = useId();
  return (
    <>
      <input id={id} type="checkbox" />
      <label htmlFor={id}>Subscribe</label>
    </>
  );
}

为多个相关元素生成唯一 ID

如果需要为多个相关元素生成关联的 ID，可以通过拼接字符串实现：

javascript 复制代码

function NameFields() {
  const id = useId();
  return (
    <div>
      <label htmlFor={`${id}-firstName`}>First Name</label>
      <input id={`${id}-firstName`} type="text" />
      <label htmlFor={`${id}-lastName`}>Last Name</label>
      <input id={`${id}-lastName`} type="text" />
    </div>
  );
}

useId 的注意事项

useId 生成的 ID 包含 : 字符，因此不适合直接用作 CSS 选择器或 querySelector 的参数。如果需要用于此类场景，可以手动替换掉 : 或其他特殊字符。
useId 不应用于生成列表中的 key。列表的 key 应该来自数据本身的唯一标识符，而不是通过 useId 生成。

useId 与自定义 ID 生成器的对比

在 React 18 之前，开发者通常需要手动实现 ID 生成逻辑，例如使用计数器或随机数。这种方式在服务端渲染时可能会导致 ID 不匹配。useId 解决了这一问题，确保生成的 ID 在服务端和客户端保持一致。

javascript 复制代码

// 旧版实现（不推荐）
let counter = 0;
function useLegacyId() {
  const [id] = useState(() => `id-${counter++}`);
  return id;
}

useId 的兼容性

useId 是 React 18 的新特性，因此需要确保项目使用的是 React 18 或更高版本。对于旧版 React，可以通过 polyfill 或自定义 Hook 实现类似功能。