学习React-20-useId。

React 20 useId详解

最新推荐文章于 2025-12-02 15:55:42 发布

原创最新推荐文章于 2025-12-02 15:55:42 发布 · 337 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#人工智能

React 20 useId 的作用与原理

useId 是 React 20 引入的一个 Hook，用于生成唯一的 ID。这个 ID 在客户端和服务器端都能保持一致，适用于需要唯一标识符的场景，比如表单元素的 id 和 htmlFor 属性关联。

useId 生成的 ID 是一个字符串，形如 :r1:、:r2: 等。它在服务器端渲染（SSR）和客户端渲染（CSR）中保持一致，避免 hydration 不匹配的问题。

基本用法示例

import { useId } from 'react';

function Checkbox() {
  const id = useId();
  return (
    <>
      <label htmlFor={id}>Do you like React?</label>
      <input id={id} type="checkbox" name="react"/>
    </>
  );
}

生成多个 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 在服务器端和客户端生成的 ID 保持一致，避免了 hydration 过程中因 ID 不匹配导致的警告或错误。这一点在需要稳定唯一标识符的场景中尤为重要。

替代方案对比

在 useId 出现之前，开发者通常使用以下方法生成唯一 ID：

Math.random()：生成