React Hooks 源码解读之 useId
react 版本：v18.3.0
1、Hook 入口
在 React Hooks 源码解读之Hook入口 一文中，我们介绍了 Hooks 的入口及hook处理函数的挂载，从 hook 处理函数的挂载关系我们可以得到这样的等式：
-
挂载阶段：
useId = ReactCurrentDispatcher.current.useId = HooksDispatcherOnMount.useId = mountId;
-
更新阶段：
useId = ReactCurrentDispatcher.current.useId = HooksDispatcherOnUpdate.useId = updateId;
因此，组件在挂载阶段，执行 useId，其实执行的是 mountId，而在更新阶段，则执行的是updateId 。
2、挂载阶段
组件在挂载阶段，执行 useId，实际上执行的是 mountId，下面我们来看看 mountId 的实现：
2.1 mountId
// packages/react-reconciler/src/ReactFiberHooks.js
function mountId(): string {
// 创建 hook 对象，将 hook 对象添加到 workInProgressHook 单向链表中，返回最新的 hook 链表
const hook = mountWorkInProgressHook();
// 获取 FiberRoot 对象
const root = ((getWorkInProgressRoot(): any): FiberRoot);
// TODO: In Fizz, id generation is specific to each server config. Maybe we
// should do this in Fiber, too? Deferring this decision for now because
// there's no other place to store the prefix except for an internal field on
// the public createRoot object, which the fiber tree does not currently have
// a reference to.
const identifierPrefix = root.identifierPrefix;
let id;
if (getIsHydrating()) {
// 服务端渲染注水（hydrate）阶段生成的唯一 id，以冒号开头，并以冒号结尾，使用大写字母 R 标识该id是服务端渲染生成的id
// 获取组件树的id
const treeId = getTreeId();
// 拼接 id，以冒号开头，并以冒号结尾
// Use a captial R prefix for server-generated ids.
id = ':' + identifierPrefix + 'R' + treeId;
// Unless this is the first id at this level, append a number at the end
// that represents the position of this useId hook among all the useId
// hooks for this fiber.
// localIdCounter 变量记录组件中 useId 的执行次数
const localId = localIdCounter++;
if (localId > 0) {
id += 'H' + localId.toString(32);
}
id += ':';
} else {
// 客户端渲染生成的唯一 id，以冒号开头，并以冒号结尾，使用小写字母 r 标识该id 是客户端渲染生成的id
// Use a lowercase r prefix for client-generated ids.
// 全局变量 globalClientIdCounter 记录 useId hook 在组件中的调用次数
const globalClientId = globalClientIdCounter++;
// 拼接 id，以冒号开头，并以冒号结尾
id = ':' + identifierPrefix + 'r' + globalClientId.toString(32) + ':';
}
// 将生成的唯一 id 存储到 hook 对象的 memoizedState 属性上
hook.memoizedState = id;
return id;
}
组件在挂载时，执行 useId，首先会创建一个 hook 对象，该 hook 对象将会被添加到 workInProgressHook 单向链表中：
// 创建 hook 对象，将 hook 对象添加到 workInProgressHook 单向链表中，返回最新的 hook 链表
const hook = mountWorkInProgressHook();
接着调用 getWorkInProgressRoot() 方法获取当前的 FiberRoot 对象，从 FiberRoot 对象 上获取id前缀：
// 获取 FiberRoot 对象
const root = ((getWorkInProgressRoot(): any): FiberRoot);
const identifierPrefix = root.identifierPrefix;
然后调用 getIsHydrating() 方法判断是服务端渲染还是客户端渲染，根据不同的渲染方式执行不同的逻辑生成id：
if (getIsHydrating()) {
// 服务端渲染注水（hydrate）阶段生成的唯一 id，以冒号开头，并以冒号结尾，使用大写字母 R 标识该id是服务端渲染生成的id
// 获取组件树的id
const treeId = getTreeId();
// 拼接 id，以冒号开头，并以冒号结尾
// Use a captial R prefix for server-generated ids.
id = ':' + identifierPrefix + 'R' + treeId;
// Unless this is the first id at this level, append a number at the end
// that represents the position of this useId hook among all the useId
// hooks for this fiber.
// localIdCounter 变量记录组件中 useId 的执行次数
const localId = localIdCounter++;
if (localId > 0) {
id += 'H' + localId.toString(32);
}
id += ':';
} else {
// 客户端渲染生成的唯一 id，以冒号开头，并以冒号结尾，使用小写字母 r 标识该id 是客户端渲染生成的id
// Use a lowercase r prefix for client-generated ids.
// 全局变量 globalClientIdCounter 记录 useId hook 在组件中的调用次数
const globalClientId = globalClientIdCounter++;
// 拼接 id，以冒号开头，并以冒号结尾
id = ':' + identifierPrefix + 'r' + globalClientId.toString(32) + ':';
}
从上面的代码可以看到，无论是服务端渲染还是客户端渲染，生成的id的第一个字符串是冒号，最后一个字符串也是冒号。如果是服务端渲染，会使用大写字母 R 作为标识，并获取组件树的 treeId 拼接到 id 中，如果是客户端渲染，会使用小写字母 r 作为标识。
在服务端渲染中，使用了 localIdCounter 变量来记录 useId 在页面中被使用的次数，在客户端中使用 globalClientIdCounter 变量来记录 useId 在页面中被使用的次数，因此，即使 useId 在页面中出现多次，生成的 ID 也不会冲突。
最后将生成的id保存到 hook 对象的 memoizedState 属性上，并返回缓存后的值：
// 将生成的唯一 id 存储到 hook 对象的 memoizedState 属性上
hook.memoizedState = id;
return id;
2.2 mountWorkInProgressHook
在 mountId() 函数中，使用 mountWorkInProgressHook() 函数创建了一个新的 hook 对象，我们来看看它是如何被创建的：
// packages/react-reconciler/src/ReactFiberHooks.js
// 创建一个新的 hook 对象，并返回当前的 workInProgressHook 对象
// workInProgressHook 对象是全局对象，在 mountWorkInProgressHook 中首次初始化
function mountWorkInProgressHook(): Hook {
const hook: Hook = {
memoizedState: null,
baseState: null,
baseQueue: null,
queue: null,
next: null,
};
// Hooks are stored as a linked list on the fiber's memoizedState field
// 将 新建的 hook 对象以链表的形式存储在当前的 fiber 节点memoizedState属性上
// 只有在第一次打开页面的时候，workInProgressHook 为空
if (workInProgressHook === null) {
// This is the first hook in the list
// 链表上的第一个 hook
// currentlyRenderingFiber： The work-in-progress fiber. I've named it differently to distinguish it fromthe work-in-progress hook.
currentlyRenderingFiber.memoizedState = workInProgressHook = hook;
} else {
// Append to the end of the list
// 已经存在 workInProgressHook 对象，则将新创建的这个 Hook 接在 workInProgressHook 的尾部，形成链表
workInProgressHook = workInProgressHook.next = hook;
}
return workInProgressHook;
}
可以看到，在新建一个 hook 对象时，如果全局的 workInProgressHook 对象不存在 (值为 null)，即组件在首次渲染时，将新建的 hook 对象赋值给 workInProgressHook 对象，也同时将 hook 对象赋值给 currentlyRenderingFiber 的 memoizedState 属性，如果 workInProgressHook 不为 null，则将 hook 对象接在 workInProgressHook 的尾部，从而形成一个单向链表。
3、更新阶段
组件在更新阶段，执行 useId，实际上执行的是 updateId，下面我们来看看 updateId 的实现。
3.1 updateId
function updateId(): string {
// 获取当前的 workInProgressHook
const hook = updateWorkInProgressHook();
// 从当前的 workInProgressHook 上获取 useId 生成的 id，因此即使组件重新渲染，id 也不会变化
const id: string = hook.memoizedState;
return id;
}
在更新阶段，执行 useId，首先会调用 updateWorkInProgressHook() ，获取当前正在执行 update 任务的fiber 节点上的 workInProgressHook 对象：
接着从 workInProgressHook 对象上获取 useId 生成的 id，因此即使组件重新渲染，useId 生成的 id 也不会变。
4、useId 流程图
5、总结
useId 用于生成一个唯一的字符串 ID，在使用这个 hook 时需要注意的是，不能在循环语句或条件语句中使用。
useId 生成的字符串ID，第一个字符是冒号，最后一个字符也是冒号，如果是服务端渲染生成的ID，则会使用大写字母 R 作为标识，如果是客户端渲染生成的ID，则会使用小写字母 r 作为标识。
useId 生成字符串ID时，会使用一个全局变量来记录 useId 在页面中出现的次数，因此，即使 useId 在页面中出现多次，生成的 ID 也不会冲突。