useId
首先要理解SSR时,服务端和客户端的水合
服务端会生成一个HTML模版,和JS一起发给客户端,然后客户端的JS来“水合”HTML中的内容,转为可交互的组件。
而官方文档中所说的“客户端组件被激活处理后的顺序可能与服务器 HTML 的顺序不匹配”指的是:
react18的流式SSR中,服务器分批发送HTML,而客户端会动态加载一些异步组件,这就导致服务端和客户端渲染组件的顺序不同,用递增计数器就会有两套不同的ID序列,导致水合失败,React会在客户端重新渲染这部分DOM。
所以18新增了这个hook来保证在客户端和服务端生成稳定的、唯一的ID。