ReactDOM.render(
  <App />,
  document.getElementById('root')
);

export function render(
  element: React$Element<any>,  container: Container,  callback: ?Function,
) {
  // 驗(yàn)證container是否為有效的DOM節(jié)點(diǎn)
  invariant(
    isValidContainer(container),
    'Target container is not a DOM element.',
  );
  return legacyRenderSubtreeIntoContainer(
    null,
    element,
    container,
    false,
    callback,
  );
}

function legacyRenderSubtreeIntoContainer(
  parentComponent: ?React$Component<any, any>,
  children: ReactNodeList,
  container: Container,
  forceHydrate: boolean,
  callback: ?Function,
) {
  // TODO: Without `any` type, Flow says "Property cannot be accessed on any
  // member of intersection type." Whyyyyyy.
  let root: RootType = (container._reactRootContainer: any);
  let fiberRoot;
  if (!root) {
    // Initial mount 初次渲染創(chuàng)建FiberRoot
    root = container._reactRootContainer = legacyCreateRootFromDOMContainer(
      container,
      forceHydrate,
    );
    fiberRoot = root._internalRoot;
    if (typeof callback === 'function') {
      const originalCallback = callback;
      callback = function() {
        const instance = getPublicRootInstance(fiberRoot);
        originalCallback.call(instance);
      };
    }
    // Initial mount should not be batched.
    unbatchedUpdates(() => {
      updateContainer(children, fiberRoot, parentComponent, callback);
    });
  } else {
    fiberRoot = root._internalRoot;
    if (typeof callback === 'function') {
      const originalCallback = callback;
      callback = function() {
        const instance = getPublicRootInstance(fiberRoot);
        originalCallback.call(instance);
      };
    }
    // Update
    updateContainer(children, fiberRoot, parentComponent, callback);
  }
  return getPublicRootInstance(fiberRoot);
}

function legacyCreateRootFromDOMContainer(
  container: Container,  forceHydrate: boolean,
): RootType {
  const shouldHydrate =
    forceHydrate || shouldHydrateDueToLegacyHeuristic(container); // 判斷是否是服務(wù)端渲染
  // First clear any existing content.
  if (!shouldHydrate) {
    let warned = false;
    let rootSibling;
    while ((rootSibling = container.lastChild)) {
      container.removeChild(rootSibling);
    }
  }
  return createLegacyRoot(
    container,
    shouldHydrate
      ? {
          hydrate: true,
        }
      : undefined,
  );
}

export function createLegacyRoot(  container: Container,  options?: RootOptions, // hydrate
): RootType {
  return new ReactDOMBlockingRoot(container, LegacyRoot, options);
}

function ReactDOMBlockingRoot(
  container: Container,  tag: RootTag,  options: void | RootOptions,
) {
  this._internalRoot = createRootImpl(container, tag, options);
}

function createRootImpl(
  container: Container,
  tag: RootTag,
  options: void | RootOptions,
) {
  // Tag is either LegacyRoot or Concurrent Root
  const hydrate = options != null && options.hydrate === true;
  const hydrationCallbacks =
    (options != null && options.hydrationOptions) || null;
    // 拿到FiberRootNode
  const root = createContainer(container, tag, hydrate, hydrationCallbacks);
  // 將FiberRootNode掛載到container
  markContainerAsRoot(root.current, container);
  if (hydrate && tag !== LegacyRoot) {
    const doc =
      container.nodeType === DOCUMENT_NODE
        ? container
        : container.ownerDocument;
    eagerlyTrapReplayableEvents(container, doc);
  }
  return root;
}

export function createContainer(  containerInfo: Container,  tag: RootTag,  hydrate: boolean,  hydrationCallbacks: null | SuspenseHydrationCallbacks,): OpaqueRoot {
  return createFiberRoot(containerInfo, tag, hydrate, hydrationCallbacks);
}

export function createFiberRoot(  containerInfo: any,  tag: RootTag,  hydrate: boolean,  hydrationCallbacks: null | SuspenseHydrationCallbacks,): FiberRoot {
  // 新建fiberRoot對(duì)象
  const root: FiberRoot = (new FiberRootNode(containerInfo, tag, hydrate): any);
  if (enableSuspenseCallback) {
    root.hydrationCallbacks = hydrationCallbacks;
  }
  // Cyclic construction. This cheats the type system right now because
  // stateNode is any.
  //初始化RootFiber
  const uninitializedFiber = createHostRootFiber(tag);
  root.current = uninitializedFiber;
  // RootFiber的stateNode指向FiberRoot
  uninitializedFiber.stateNode = root;
  initializeUpdateQueue(uninitializedFiber);
  return root;
}

function FiberRootNode(containerInfo, tag, hydrate) {
  // 標(biāo)記不同的組件類型
  this.tag = tag;
  // 當(dāng)前應(yīng)用對(duì)應(yīng)的Fiber對(duì)象，是Root Fiber
  // current:Fiber對(duì)象 對(duì)應(yīng)的是 root 節(jié)點(diǎn)，即整個(gè)應(yīng)用根對(duì)象
  this.current = null;
  // root節(jié)點(diǎn)，render方法接收的第二個(gè)參數(shù)
  this.containerInfo = containerInfo;
   // 只有在持久更新中會(huì)用到，也就是不支持增量更新的平臺(tái)，react-dom不會(huì)用到
  this.pendingChildren = null;
  this.pingCache = null;
  //任務(wù)有三種，優(yōu)先級(jí)有高低：
  //（1）沒有提交的任務(wù)
  //（2）沒有提交的被掛起的任務(wù)
  //（3）沒有提交的可能被掛起的任務(wù)
   //當(dāng)前更新對(duì)應(yīng)的過期時(shí)間
  this.finishedExpirationTime = NoWork;
  //已經(jīng)完成任務(wù)的FiberRoot對(duì)象，如果你只有一個(gè)Root，那么該對(duì)象就是這個(gè)Root對(duì)應(yīng)的Fiber或null
  //在commit(提交)階段只會(huì)處理該值對(duì)應(yīng)的任務(wù)
  this.finishedWork = null;
  // 在任務(wù)被掛起的時(shí)候通過setTimeout設(shè)置的返回內(nèi)容，用來下一次如果有新的任務(wù)掛起時(shí)清理還沒觸發(fā)的timeout(例如suspense返回的promise)
  this.timeoutHandle = noTimeout;
  // 頂層context對(duì)象，只有主動(dòng)調(diào)用renderSubTreeIntoContainer時(shí)才會(huì)被調(diào)用
  this.context = null;
  this.pendingContext = null;
  // 第一次渲染是否需要調(diào)和
  this.hydrate = hydrate;
  // Node returned by Scheduler.scheduleCallback
  this.callbackNode = null;
  this.callbackPriority = NoPriority;
  //存在root中，最舊的掛起時(shí)間
  //不確定是否掛起的狀態(tài)（所有任務(wù)一開始均是該狀態(tài)）
  this.firstPendingTime = NoWork;
  this.firstSuspendedTime = NoWork;
  this.lastSuspendedTime = NoWork;
  this.nextKnownPendingLevel = NoWork;
  //存在root中，最新的掛起時(shí)間
  //不確定是否掛起的狀態(tài)（所有任務(wù)一開始均是該狀態(tài)）
  this.lastPingedTime = NoWork;
  this.lastExpiredTime = NoWork;
  this.mutableSourcePendingUpdateTime = NoWork;
  if (enableSchedulerTracing) {
    this.interactionThreadID = unstable_getThreadID();
    this.memoizedInteractions = new Set();
    this.pendingInteractionMap = new Map();
  }
  if (enableSuspenseCallback) {
    this.hydrationCallbacks = null;
  }
}

// 位于 react-reconciler/src/ReactFiber.js
export function createHostRootFiber(tag: RootTag): Fiber {
  let mode;
  if (tag === ConcurrentRoot) {
    mode = ConcurrentMode | BlockingMode | StrictMode;
  } else if (tag === BlockingRoot) {
    mode = BlockingMode | StrictMode;
  } else {
    mode = NoMode;
  }
  return createFiber(HostRoot, null, null, mode);
}
const createFiber = function(
  tag: WorkTag,
  pendingProps: mixed,
  key: null | string,
  mode: TypeOfMode,
): Fiber {
  return new FiberNode(tag, pendingProps, key, mode);
};
// FiberNode結(jié)構(gòu)
function FiberNode(
  tag: WorkTag,
  pendingProps: mixed,
  key: null | string,
  mode: TypeOfMode,
) {
  // Instance
  // 標(biāo)記不同的組件類型
  this.tag = tag;
  // ReactElement里面的key
  this.key = key;
  // ReactElement.type，也就是我們調(diào)用`createElement`的第一個(gè)參數(shù)
  this.elementType = null;
  // 異步組件lazy component resolved之后返回的內(nèi)容，一般是`function`或者`class`組件
  this.type = null;
  // 對(duì)應(yīng)節(jié)點(diǎn)的實(shí)例，比如類組件就是class的實(shí)例，如果是dom組件就是dom實(shí)例，如果是function component就沒有實(shí)例這里為空
  this.stateNode = null;
  // Fiber Fiber是個(gè)鏈表通過child和Sibling連接，遍歷的時(shí)候先遍歷child如果沒有子元素了則訪問return回到上級(jí)查詢是否有sibling
  // 指向他在Fiber節(jié)點(diǎn)樹中的‘parent'，用來在處理完這個(gè)節(jié)點(diǎn)之后向上返回
  this.return = null;
  // 指向第一個(gè)子節(jié)點(diǎn)
  this.child = null;
  // 指向自己的兄弟節(jié)點(diǎn)，兄弟節(jié)點(diǎn)的return指向同一個(gè)副節(jié)點(diǎn)
  this.sibling = null;
  this.index = 0;
  this.ref = null;
  // 新的變動(dòng)帶來的新的props
  this.pendingProps = pendingProps;
  // 上次渲染完成后的props
  this.memoizedProps = null;
  // 該Fiber對(duì)應(yīng)的組件產(chǎn)生的update會(huì)存放在這個(gè)隊(duì)列（比如setState和forceUpdate創(chuàng)建的更新）
  this.updateQueue = null;
  // 上一次的state
  this.memoizedState = null;
  this.dependencies = null;
  // 
  this.mode = mode;
  // Effects
  // 用來記錄副作用
  this.effectTag = NoEffect;
  // 單鏈表用來快速查找下一個(gè)side effect
  this.nextEffect = null;
  // 子樹中第一個(gè)side effect
  this.firstEffect = null;
  // 子樹中最后一個(gè)side effect
  this.lastEffect = null;
  // 代表任務(wù)在未來的哪個(gè)時(shí)候應(yīng)該被完成 就是過期時(shí)間
  // 不包括他的子樹產(chǎn)生的任務(wù)
  this.expirationTime = NoWork;
  // 快速確定子樹中是否有不再等待的變化
  this.childExpirationTime = NoWork;
  // Fiber樹更新過程中，每個(gè)FIber都會(huì)有一個(gè)跟其對(duì)應(yīng)的Fiber
  // 我們稱他為`current <==> workInProgress`
  // 渲染完成后他們會(huì)交換位置
  this.alternate = null;
  // 調(diào)試相關(guān)的去掉了
}

export function initializeUpdateQueue<State>(fiber: Fiber): void {
  const queue: UpdateQueue<State> = {
    // 每次操作完更新阿之后的state
    baseState: fiber.memoizedState,
    // 隊(duì)列中的第一個(gè)`Update`
    firstBaseUpdate: null,
    // 隊(duì)列中的最后一個(gè)`Update`
    lastBaseUpdate: null,
    shared: {
      pending: null,
    },
    effects: null,
  };
  fiber.updateQueue = queue;
}