Skip to main content

谈谈 useId

是什么​

useId 是一个用于生成横跨服务端和客户端的稳定的唯一 ID 的同时避免 hydration 不匹配的 hook。

使用场景​

如果当前组件已经在服务端渲染过了，但是在客户端我们并没有什么手段知道这个事情，于是客户端还会重新再渲染一次，这样就造成了冗余的渲染。

  1. React 在服务端渲染，生成随机 id（假设为 0.1234），这一步叫 dehydrate（脱水）
  2. <div id="0.12345">Hello</div>作为 HTML 传递给客户端，作为首屏内容
  3. React 在客户端渲染，生成随机 id（假设为 0.6789），这一步叫 hydrate（注水）

客户端、服务端生成的 id 不匹配！

参考文章​