概览

在createRoot方法中提到React会调用createFiberRoot方法创建Fiber树的根节点FiberRoot以及根Fiber节点，本文主要介绍createFiberRoot这个函数。

源码解析

function createFiberRoot(
  containerInfo, // 容器信息
  tag, //1， 根节点类型 
  hydrate, // false,表示客户端渲染
  initialChildren, // 初始子元素
  hydrationCallbacks, // 水合回调
  isStrictMode, // 是否严格模式
  identifierPrefix, // 用于生成React唯一ID的前缀
  formState,// 表单状态
  onUncaughtError, //未捕获错误回调
  onCaughtError, // 已捕获错误回调
  onRecoverableError, // 可恢复错误回调
  onDefaultTransitionIndicator //默认过渡指示回调
) {
  containerInfo = new FiberRootNode(
    containerInfo,
    tag,
    hydrate,
    identifierPrefix,
    onUncaughtError,
    onCaughtError,
    onRecoverableError,
    onDefaultTransitionIndicator,
    formState
  );
  tag = 1;
  !0 === isStrictMode && (tag |= 24);
  isStrictMode = createFiberImplClass(3, null, null, tag);
  containerInfo.current = isStrictMode;
  isStrictMode.stateNode = containerInfo;
  tag = createCache();
  tag.refCount++;
  containerInfo.pooledCache = tag;
  tag.refCount++;
  isStrictMode.memoizedState = {
    element: initialChildren,
    isDehydrated: hydrate,
    cache: tag
  };
  initializeUpdateQueue(isStrictMode);
  return containerInfo;
}

var AbortControllerLocal =
    "undefined" !== typeof AbortController
      ? AbortController
      : function () {
          var listeners = [],
            signal = (this.signal = {
              aborted: !1,
              addEventListener: function (type, listener) {
                listeners.push(listener);
              }
            });
          this.abort = function () {
            signal.aborted = !0;
            listeners.forEach(function (listener) {
              return listener();
            });
          };
        }

function createCache() {
  return {
    controller: new AbortControllerLocal(),
    data: new Map(),
    refCount: 0
  };
}