学习React-20-useId

useId 的基本概念

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

useId 的语法

const id = useId();

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

useId 的使用场景

为表单元素生成唯一 ID

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

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

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

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 在服务端和客户端保持一致。

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

useId 的兼容性

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