likes
comments
collection
share

精读React hook(十四):总有一天你会需要useId为你生成唯一id

作者站长头像
站长
· 阅读数 17

在开始介绍 useId 之前,有必要先介绍一下 React 的服务端渲染和客户端渲染之间的关系。当你看到一个服务端渲染的应用,它的渲染过程会是这样:服务端会先生成 HTML,然后将这个 HTML 发送到客户端,在客户端,React 会进行一个叫做 hydration 的过程,即将服务器端生成的 HTML 和客户端的 DOM 进行匹配,并生成最终的 HTML。

而在这个过程中,我们有时候需要给 DOM 生成唯一的 ID。例如:我们需要通过 JavaScript 或 CSS 选择器来访问 DOM 的时候;或者某些HTML属性(如 aria-labelledby)需要使用唯一的 ID 来关联元素。

如果在 hydration 过程中,服务器端和客户端生成的 ID 不一致,那么就会导致 hydration 失败。为了解决这个问题,React v18 引入了一个新的 Hook——useId。通过使用一些内部机制,React 确保了无论是在服务器端还是客户端,对于同一个组件实例,useId 都会返回相同的 ID。在本文中,我们将探讨 useId 的使用方式和使用场景。

useId的使用

使用 useId 非常简单,这是它的用法定义:

const id = useId()

它不需要任何参数。

基础用法

useId 会返回一个唯一的 ID,你可以将这个 ID 用于任何需要唯一 ID 的地方。这是一个使用 useId 的代码示例:

import { useId } from 'react';

function MyComponent() {
  const uniqueId = useId();

  return (
    <div id={uniqueId}>
      Hello, 👉 weijunext.com
    </div>
  );
}

使用场景一:为可访问属性、无障碍属性生成唯一ID

如下面的例子,我们想关联 labelinput,就需要在 <input> 元素上设置一个唯一的 id 属性;再在对应的 <label> 元素上设置 htmlFor 属性,其值与上述 id 相同。为了保证 id 唯一,就可以用 useId 来实现。

import { useId } from "react";

export default function App() {
  const FullName = useId();
  const email = useId();

  return (
    <div className="card">
      <div>
        <label htmlFor={FullName}>Full Name</label>
        <input type="text" id={FullName} name="Full Name" />{" "}
      </div>
      <div>
        <label htmlFor={email}>Enter Email</label>
        <input type="email" id={email} name="email" />
      </div>
    </div>
  );
}

使用场景二:多次调用保证ID不重复

import { useId } from 'react';

function PasswordField() {
  const passwordHintId = useId();
  return (
    <>
      <label>
        密码:
        <input
          type="password"
          aria-describedby={passwordHintId}
        />
      </label>
      <p id={passwordHintId}>
        密码应该包含至少 18 个字符
      </p>
    </>
  );
}

export default function App() {
  return (
    <>
      <PasswordField />
      <PasswordField />
    </>
  );
}

当我们给组件使用 useId 后,即使这个组件被调用多次,也不会出现 id 重复的情况。

使用场景三:为相关元素生成统一前缀或后缀

有时候我们会想给相关元素(如表单项分类、列表元素)设置一个统一的前缀或后缀,那么这个前缀或后缀就可以用 useId 来生成。用法如下:

import { useId } from "react";

export default function Example2() {
  let prefix1 = useId();
  let prefix2 = useId();

  return (
    <div className="card">
      <div>
        <label htmlFor={prefix1 + "-fullName"}>Full Name</label>
        <input type="text" id={prefix1 + "-fullName"} name="Full Name" />
      </div>
      <div>
        <label htmlFor={prefix1 + "-lastName"}>Last Name</label>
        <input type="text" id={prefix1 + "-lastName"} name="Last Name" />
      </div>

      <div>
        <label htmlFor={prefix2 + "-email"}>Enter Email</label>
        <input type="email" id={prefix2 + "-email"} name="email" />
      </div>
		 </div>
  );
}

在简单的场景下,这样做既可以减少 useId 的使用,又可以通过设置局部的唯一字符,实现 id 唯一的需求。

使用场景四:为应用生成全局统一的前缀或后缀

想象一个场景,我们想在一个单页面应用里渲染多个 React 应用,如下面这样:

<!DOCTYPE html>
<html>
  <head><title>My app</title></head>
  <body>
    <div id="root1"></div>
    <div id="root2"></div>
  </body>
</html>

现在我们想给两个 React 应用都生成独立的唯一前缀,可以在 createRoot 调用中将 identifierPrefix 作为选项传递:

const root1 = createRoot(document.getElementById('root1'), {
  identifierPrefix: 'my-first-app-'
});
root1.render(<App />);

const root2 = createRoot(document.getElementById('root2'), {
  identifierPrefix: 'my-second-app-'
});
root2.render(<App />);

总结

以上就是 useId 的使用方式和使用场景的总结,总的来说,useId 就是为所有可能需要唯一 ID 的场景而设计的,而这种特性在服务端渲染的应用里能把价值体现到最大。

系列文章列表

未完待续……

转载自:https://juejin.cn/post/7280436247746002963
评论
请登录