useId

介绍

useId 是一个 React Hook，用于生成唯一的 ID，通常用于无障碍属性（如 aria-labelledby）或表单元素的 id 属性。它确保在服务器端渲染（SSR）和客户端渲染之间保持一致的 ID。

核心特性：

1. 稳定一致：服务端和客户端生成相同的 ID。
2. 自动唯一：基于组件树路径生成，天然唯一。
3. 零配置：开箱即用。
4. 类型安全：完整的 TS 支持。

快速入门

语法

const id = useId()

示例

import { useId } from 'react'

function MyComponent() {
  const id = useId()

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

为什么 SSR 中的 ID 生成如此困难？

问题根源：Hydration Mismatch

在 SSR 环境下，服务端和客户端生成的内容必须完全一致。

常见场景：

• 表单控件 label 与 input 关联。
• ARIA 属性的 id 关联。
• 无障碍功能的实现。

useId 的工作原理

1. 组件树结构
2. 路径推导
3. ID 生成算法
   1. 服务端 ID：:r0:
   2. 客户端 ID：:r0:
4. Hydration（水合）成功

关键机制：

• 基于组件树路径：ID 由组件在树的位置决定。
• 确定性算法：相同的树结构产生相同的 ID。
• 服务端客户端一致：保证了 Hydration 成功。