【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 来保证一致性和性能。

相关推荐
数字化顾问5 分钟前
解析前端框架 Axios 的设计理念与源码:从零手写一个支持 HTTP/3 的“类 Axios”最小核
前端
二个半engineer10 分钟前
微前端中iframe集成方式与使用微前端框架方式对比
前端·前端框架
小菜全21 分钟前
《WebAssembly:前端开发的新可能》
前端·javascript
余防27 分钟前
CSRF跨站请求伪造
前端·安全·web安全·csrf
兮山与31 分钟前
前端2.0
前端
南风木兮丶38 分钟前
Vue 项目安装 @antfu/eslint-config 保姆级教程
前端·javascript·vue.js
万少1 小时前
记 HarmonyOS 开发中的一个小事件 怒提华为工单
前端·harmonyos
未来之窗软件服务1 小时前
万象EXCEL开发(六)excel单元格运算逻辑 ——东方仙盟金丹期
前端·excel·仙盟创梦ide·东方仙盟·万象excel
Mintopia1 小时前
🚀 Cesium-Kit:10 秒为你的 Cesium 项目添加动态光效标记
前端·javascript·cesium
Mintopia1 小时前
🌩️ 云边协同架构下的 WebAI 动态资源调度技术
前端·javascript·aigc