🔑 React 中的 useId 是什么？

Source: Dev.to

useId 是 React 的一个 Hook（自 18 版起可用），它在组件内部生成唯一且稳定的标识符。它返回的字符串对该组件实例而言是唯一保证的。

useId 的用途是什么？

元素关联（可访问性）

最常见的用法是将 <label> 与表单字段（<input>）关联。在 HTML 中，label 的 htmlFor 属性必须与 input 的 id 属性相同。如果手动写死 ID，而组件被多次渲染，就会出现重复 ID，导致 HTML 无效并影响屏幕阅读器。

使用 useId，每个组件实例都会得到不同的 ID，确保 label 与 input 正确关联。

import { useId } from 'react';

function PasswordField() {
  // 为此实例生成唯一且稳定的 ID
  const passwordId = useId();

  return (
    <>
      Senha:
      {/* exemplo de uso do ID */}
      <label htmlFor={passwordId}>Senha</label>
      <input id={passwordId} type="password" />
    </>
  );
}

与服务器端渲染（SSR）的兼容性

useId 确保在服务器首次渲染时生成的 ID 与随后在客户端渲染（hydrate）时使用的 ID 完全相同。这避免了因随机或非确定性生成 ID 而导致的不匹配，保持服务器和客户端之间的 HTML 一致。

其他 ARIA 属性

该 Hook 也可用于 ARIA 可访问性属性，例如：

• aria-labelledby
• aria-describedby

何时 不应 使用 useId？

• 为列表生成 key：列表（.map()）中的键 (key) 应基于稳定的数据（例如数据库中的 ID）。useId 在列表重新排序时不保证稳定性，可能导致状态错误。
• 生成全局唯一 ID（UUID）：虽然在 React 树内部是唯一的，但 ID 的格式是确定性的，以保证服务器和客户端的一致性，不能用作全局随机唯一标识符（如 UUID）。