源码分析之React中的useId

Jinuss2026-04-03 10:06

概述

在 React 中，useId() 是一个用于生成唯一标识符的 Hook。

源码分析

useId()对应挂载和更新阶段的方法分别是mountId和updateId方法，这两个方法也是一个存和取的操作。

mountId方法

root.identifierPrefix可以自定义，应用的入口createRoot方法的第二个参数是可选的，接受一个options对象，identifierPrefix就是它的属性之一。

js 复制代码

// 全局计数器
let globalClientIdCounter = 0;
function mountId(){
    // 获取当前hook
    const hook = mountWorkInProgressHook();
    // 获取Root
    const root = getWorkInProgressRoot();
    // 获取root上的前缀
    const identifierPrefix = root.identifierPrefix;
    let id;
    
     const globalClientId = globalClientIdCounter++;
    id = '_' + identifierPrefix + 'r_' + globalClientId.toString(32) + '_';
    // 将生成的id存到fiber的memoizedState中
    hook.meomizedState = id;
    // 返回id
    return id;
}

updateId方法

js 复制代码

function updateId() {
 // 获取hook
  const hook = updateWorkInProgressHook();
  // 读取hook
  const id = hook.memoizedState;
  // 返回id
  return id;
}

总结

useId hook 就是在生成一个唯一的id标识符字符串，在React内部有一个递增的计数器globalClientIdCounter，id就是计数器加上一些字符，也可以在应用入口定义前缀identifierPrefix。