React 独辟蹊径：useId 助力组件化 ID 生成，解决 SSR 冲突难题

s99dcxll

321人浏览 · 2026-05-13 18:05:20

s99dcxll · 2026-05-13 18:05:20 发布

在构建复杂的 React 应用，尤其是涉及服务端渲染（SSR）时，为 HTML 元素生成唯一的 ID 变得至关重要。传统的 ID 生成方式，例如使用 Math.random() 或 Date.now()，容易在 SSR 环境下产生 ID 冲突，导致 hydration 错误，进而影响用户体验。React 18 引入的 useId Hook 正是为了解决这一痛点，它提供了一种在客户端和服务端都能保证 ID 唯一性的方案。useId 可以在组件内部生成稳定的、跨渲染环境的唯一 ID，从而简化了开发流程，提升了应用的健壮性。

问题背景：SSR 中的 ID 冲突

在没有 useId 的情况下，开发者通常会采用一些自定义的 ID 生成策略。例如：

function MyComponent() {  const id = `my-component-${Math.random()}` // 潜在的 ID 冲突风险  return <div id={id}>...</div>}

这种方式在纯客户端渲染的应用中可能工作良好，但在 SSR 环境下，由于服务端和客户端的渲染时机、随机数生成器状态等差异，可能会生成不同的 ID。当客户端进行 hydration 时，发现 DOM 结构与预期不符，就会抛出警告甚至错误，严重影响应用的正常运行。

尤其是在服务端使用了诸如 Nginx 作为反向代理，同时开启了缓存的情况下，如果生成的 HTML 中包含随机 ID，那么很容易导致缓存污染，进一步加剧 ID 冲突的问题。为了解决这类问题，开发者往往需要手动维护一个全局的 ID 生成器，这无疑增加了开发的复杂性。

useId 的原理与用法

useId 的核心在于它利用了 React 的内部机制，保证了在服务端和客户端都能生成一致的 ID。它返回一个字符串，该字符串以 : 开头，后面跟随一个数字，代表组件在渲染树中的位置。这个数字在服务端和客户端是一致的，因此生成的 ID 也是一致的。

import { useId } from 'react';function MyComponent() {  const id = useId(); // 生成唯一的 ID，例如 ':r0:'  return (    <div>      <label htmlFor={id}>Label:</label>      <input type="text" id={id} />    </div>  );}

需要注意的是，useId 生成的 ID 默认情况下是不允许直接作为 HTML 元素的 ID 使用的，因为它以 : 开头。正确的用法是将其作为 htmlFor 属性的值，或者将其与自定义的前缀组合使用。

import { useId } from 'react';function MyComponent() {  const id = useId();  const inputId = `my-component-${id}`; // 组合前缀  return (    <div>      <label htmlFor={inputId}>Label:</label>      <input type="text" id={inputId} />    </div>  );}