# ReactDOM.render做了什么？

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(<div>hello React</div>,document.getElementId('app'));

render(
    element: React$Element<any>,// React元素
    container: DOMContainer,// 真实DOM
    callback: ?Function,// 回调函数
) {
  // 检查container是不是一个真实的DOM对象
  invariant(
    isValidContainer(container),
    'Target container is not a DOM element.',
  );
  // 调用legacyRenderSubtreeIntoContainer
  return legacyRenderSubtreeIntoContainer(
    null,
    element, // React元素
    container,// 真实DOM
    false,
    callback,// 回调函数
  );
}

function legacyRenderSubtreeIntoContainer(
  parentComponent: ?React$Component<any, any>,// 子组件
  children: ReactNodeList,// React元素
  container: DOMContainer,// 真实DOM
  forceHydrate: boolean,// 是否服务端渲染
  callback: ?Function,// 回调函数
) {
  // 判断container._reactRootContainer是否存在
  let root: _ReactSyncRoot = (container._reactRootContainer: any);
  let fiberRoot;
  if (!root) {
    // 初始化一个ReactSyncRoot
    root = container._reactRootContainer = legacyCreateRootFromDOMContainer(
      container,
      forceHydrate,
    );
    // 赋值fiberRoot
    fiberRoot = root._internalRoot;
    if (typeof callback === 'function') {
      const originalCallback = callback;
      callback = function() {
        const instance = getPublicRootInstance(fiberRoot);
        originalCallback.call(instance);
      };
    }
    // 启动批量更新
    unbatchedUpdates(() => {
      // 启动container更新
      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);
      };
    }
    updateContainer(children, fiberRoot, parentComponent, callback);
  }
  // 返回React元素引用
  return getPublicRootInstance(fiberRoot);
}

function legacyCreateRootFromDOMContainer(
  container: DOMContainer,
  forceHydrate: boolean,
): _ReactSyncRoot {
  // 判断节点是否拥有data-reactroot属性
  const shouldHydrate =
    forceHydrate || shouldHydrateDueToLegacyHeuristic(container);
  // 清空container中的子元素
  if (!shouldHydrate) {
    let warned = false;
    let rootSibling;  
    while ((rootSibling = container.lastChild)) {
      container.removeChild(rootSibling);
    }
  }
  // new 一个ReactSyncRoot对象并且返回
  return new ReactSyncRoot(
    container,
    LegacyRoot,
    shouldHydrate
      ? {
          hydrate: true,
        }
      : undefined,
  );
}

export function updateContainer(
  element: ReactNodeList,// React元素
  container: OpaqueRoot,// 真实DOM
  parentComponent: ?React$Component<any, any>,// React子元素
  callback: ?Function,// 回调函数
): ExpirationTime {
  const current = container.current;
  const currentTime = requestCurrentTime();// 时长

  // 请求suspense配置
  const suspenseConfig = requestCurrentSuspenseConfig();
  // 计算出expirationTime
  const expirationTime = computeExpirationForFiber(
    currentTime,
    current,
    suspenseConfig,
  );
  // 更新container的时间，并且返回expirationTime
  return updateContainerAtExpirationTime(
    element,
    container,
    parentComponent,
    expirationTime,
    suspenseConfig,
    callback,
  );
}

export function getPublicRootInstance(
  container: OpaqueRoot,// fiberRoot
): React$Component<any, any> | PublicInstance | null {
  const containerFiber = container.current;
  if (!containerFiber.child) {
    return null;
  }
  // containerFiber.child.tag，为3是一个root节点
  switch (containerFiber.child.tag) {
    case HostComponent:
      return getPublicInstance(containerFiber.child.stateNode);
    default:
      // 返回containerFiber的stateNode
      return containerFiber.child.stateNode;
  }
}