useId
是 React 18 中引入的一个新 Hook,它用于生成一个稳定、唯一的标识符(ID)。这个 Hook 主要用于解决客户端渲染和服务器端渲染(SSR)之间 ID 不一致的问题,以及在组件内部或组件之间需要唯一 ID 时的场景。
作用:
- 生成稳定且唯一的 ID:确保即使在组件重复渲染的情况下,生成的 ID 保持稳定且唯一。
- SSR 兼容性 :当你的 React 应用涉及到服务器端渲染时,
useId
生成的 ID 会在客户端和服务器端保持一致,避免水合时的不匹配问题。 - 无障碍性(Accessibility) :在处理表单、标签、描述和其他需要唯一 ID 的无障碍特性时,
useId
可以确保正确的关联。
用法:
useId
的使用非常简单,调用它即可生成一个唯一的 ID。
ini
const myId = useId();
示例:
以下是 useId
的一个典型用例,其中我们用它来关联一个输入框和其标签:
javascript
import React, { useId } from 'react';
function LabeledInput() {
const id = useId();
return (
<>
<label htmlFor={id}>Name:</label>
<input id={id} type="text" name="name" />
</>
);
}
在这个例子中,使用 useId
生成的 ID 保证了 label
的 htmlFor
属性和 input
的 id
属性之间有唯一且稳定的对应关系。这对于无障碍性来说非常重要,因为屏幕阅读器依赖于这种关系来为视障用户提供正确的上下文。
使用注意事项:
- 不适用于密钥(keys) :
useId
生成的 ID 不应该用作 React 列表渲染中的key
属性,因为这些 ID 是组件范围内的唯一且不应与列表项的稳定性挂钩。 - 不要用于全局状态 :
useId
生成的 ID 适合用在 DOM 元素的 ID 和其他需要稳定唯一标识符的地方,但不应该用于应用程序的全局状态管理。 - SSR 环境下的注意点 :使用
useId
时,确保你的 React 版本支持 SSR,并且已正确配置了服务器端环境,以确保客户端和服务器生成的 ID 一致。 - 不要手动拼接 :虽然可以通过拼接字符串的方式来创建复杂的 ID,但 React 团队建议直接使用
useId
返回的值以保证 ID 的唯一性。
useId
提供了一种在 React 应用中生成稳定和唯一 ID 的标准方法。它特别适用于需要处理客户端和服务器端渲染一致性的应用程序,以及需要遵循无障碍性最佳实践的场景。