【React】useId

在 React 中,useId 是 React 18 引入的一个 Hook,用于生成一个在组件生命周期中保持稳定的唯一 ID。它主要用于:

  • 无障碍(accessibility)场景 ,比如表单控件需要一个 idlabelhtmlFor 属性配对。
  • 服务端渲染(SSR) 与客户端渲染保持一致。
  • 避免多个组件生成的 ID 冲突。

🧠 为什么不用自己写 id

以前开发者会自己写逻辑生成 id,比如用 Math.random()Date.now()uuid 生成,但这些在服务端渲染(SSR)和客户端渲染中可能不一致,从而导致 水合(hydration)错误

SSR:服务端渲染出 html 内容,发给浏览器,浏览器接收到 html,先展示静态内容,然后加载动态js,就是将html激活(水合),然后就生成了动态应用,但是这样服务端和浏览器端的 id 生成就会不同(可能随机数生成等等)。


useId 的基本语法

jsx 复制代码
const id = useId();
  • id 是一个 字符串,React 会自动加前缀,确保唯一性。

🧪 示例:表单中 label 与 input 关联

jsx 复制代码
import React, { useId } from 'react';

function NameInput() {
  const id = useId();

  return (
    <div>
      <label htmlFor={id}>姓名:</label>
      <input id={id} type="text" />
    </div>
  );
}

在这个例子中:

  • labelhtmlForinputid 使用同一个值。
  • useId() 保证了 ID 在每次渲染中一致,适用于 SSR。

🧩 示例:多个组件实例

jsx 复制代码
function InputField({ label }) {
  const id = useId();

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

function Form() {
  return (
    <>
      <InputField label="用户名" />
      <InputField label="邮箱" />
    </>
  );
}

每个 InputField 都会生成不同的 id,即使组件重复使用也不会冲突。


⚠️ 注意事项

  1. useId 不能用在事件处理函数或条件判断内部
  2. 它不能替代 key、uuid 等复杂 ID 生成需求(比如数据库 ID)。
  3. 如果你要生成 带后缀的 ID,可以这样做:
jsx 复制代码
const id = useId();
<input id={`${id}-email`} />

🎯 适用场景总结

场景 是否推荐用 useId
labelinput/textarea 等的 ID 配对 ✅ 是
ARIA 属性如 aria-labelledby ✅ 是
SSR 页面保持一致性 ✅ 是
用于生成数据库 ID、URL 等 ❌ 否

如果在使用 React 17 或更低版本,可以用第三方库如 uuidnanoid 作为替代,但在 React 18+ 推荐用 useId 来保证一致性和性能。

相关推荐
用户4099322502127 分钟前
FastAPI的查询白名单和安全沙箱机制如何确保你的API坚不可摧?
前端·后端·github
前端小巷子16 分钟前
深入 npm 模块安装机制
前端·javascript·面试
深职第一突破口喜羊羊1 小时前
记一次electron开发插件市场遇到的问题
javascript·electron
cypking1 小时前
electron中IPC 渲染进程与主进程通信方法解析
前端·javascript·electron
西陵2 小时前
Nx带来极致的前端开发体验——借助playground开发提效
前端·javascript·架构
江城开朗的豌豆2 小时前
Element UI动态组件样式修改小妙招,轻松拿捏!
前端·javascript·vue.js
float_六七2 小时前
JavaScript:现代Web开发的核心动力
开发语言·前端·javascript
zhaoyang03012 小时前
vue3笔记(2)自用
前端·javascript·笔记
UrbanJazzerati3 小时前
JavaScript Promise完整指南
javascript
德育处主任Pro3 小时前
# JsSIP 从入门到实战:构建你的第一个 Web 电话
前端