第一章 JSX(React18源码解析一)
第二章 实现Virtual DOM(React18源码解析二）
第三章 根节点关联根Fiber(React18源码解析三)
第四章 初始化UpdateQueue、添加update(React18源码解析四)
第五章 实现时间切片函数和拷贝Fiber(React18源码解析五)
第六章 构建FiberTree(React18源码解析六)
第七章 commit(React18源码解析七)
第八章 React中的事件(React18源码解析八)
第九章 useReducer、useState(React18源码解析九)
第十章 React的dom diff(React18源码解析十)
第十一章 React的Effect(React18源码解析十一)
第十二章 React的同步、并发渲染(React18源码解析十二)
第十三章 React高优打断低优、饥饿问题(React18源码解析十三)

一.创建根节点

//react-18.0.0/packages/react-dom/src/client/ReactDOMRoot.js
export function createRoot(container,options){
  let isStrictMode = false;
  let concurrentUpdatesByDefaultOverride = false;
  let identifierPrefix = '';
  let onRecoverableError = defaultOnRecoverableError;
  let transitionCallbacks = null;

  if (options !== null && options !== undefined) {
    if (options.unstable_strictMode === true) {
      isStrictMode = true;
    }
    if (
      allowConcurrentByDefault &&
      options.unstable_concurrentUpdatesByDefault === true
    ) {
      concurrentUpdatesByDefaultOverride = true;
    }
    if (options.identifierPrefix !== undefined) {
      identifierPrefix = options.identifierPrefix;
    }
    if (options.onRecoverableError !== undefined) {
      onRecoverableError = options.onRecoverableError;
    }
    if (options.transitionCallbacks !== undefined) {
      transitionCallbacks = options.transitionCallbacks;
    }
  }
  
  //createContainer内部调用createFiberRoot创建RootNode和Root Fiber,并且RootNode.current指向Root Fiber、RootFiber.stateNode指向RootNode
  const root = createContainer(
    container,
    ConcurrentRoot,
    null,
    isStrictMode,
    concurrentUpdatesByDefaultOverride,
    identifierPrefix,
    onRecoverableError,
    transitionCallbacks,
  );
  
  //给root.current及Root Fiber标识tag,tag表明此fiber是什么类型fiber
  markContainerAsRoot(root.current, container);

   //返回ReactDOMRoot及node._internalRoot = RootNode;
  return new ReactDOMRoot(root);
}

二.创建RootNode、RootFiber

//react-18.0.0/packages/react-reconciler/src/ReactFiberRoot.old.js
export function createFiberRoot(
  containerInfo,
  tag,
  hydrate,
  initialChildren,
  hydrationCallbacks,
  isStrictMode,
  concurrentUpdatesByDefaultOverride,
  identifierPrefix,
  onRecoverableError,
  transitionCallbacks
) {

  //创建RootNode
  const root = new FiberRootNode(
    containerInfo,
    tag,
    hydrate,
    identifierPrefix,
    onRecoverableError,
  );

  //创建RootFiber,内部调用createFiber,createFiber内部调用new FiberNode(tag, pendingProps, key, mode)
  const uninitializedFiber = createHostRootFiber(
    tag,
    isStrictMode,
    concurrentUpdatesByDefaultOverride,
  );
  
  //RootNode.current指向RootFiber
  root.current = uninitializedFiber;
  //RootFiber.stateNode指向RootNode
  uninitializedFiber.stateNode = root;

  return root;
}

三.创建Fiber

//react-18.0.0/packages/react-reconciler/src/ReactFiber.old.js
function FiberNode(
  tag,//fiber类型
  pendingProps,//虚拟dom props
  key,//fiber key
  mode,//fiber mode
) {
  // Instance
  this.tag = tag;
  this.key = key;
  this.elementType = null;
  this.type = null;
  this.stateNode = null;

  // Fiber
  this.return = null;
  this.child = null;
  this.sibling = null;
  this.index = 0;

  this.ref = null;

  this.pendingProps = pendingProps;
  this.memoizedProps = null;
  this.updateQueue = null;
  this.memoizedState = null;
  this.dependencies = null;

  this.mode = mode;

  // Effects
  this.flags = NoFlags;
  this.subtreeFlags = NoFlags;
  this.deletions = null;

  this.lanes = NoLanes;
  this.childLanes = NoLanes;

  this.alternate = null;
}

备注：

本文为清晰展现出本文核心逻辑把粘贴的源码中参数校验、typescript类型、不相关逻辑等已删除