React源码-ReactDOM.render

版本16.13.0

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

  render(
    element: React$Element<any>,
    container: DOMContainer,
    callback: ?Function,
  ) {
    return legacyRenderSubtreeIntoContainer(
      null,
      element,
      container,
      false,
      callback,
    );
  },

++实际调用legacyRenderSubtreeIntoContainer并设置它的第四个参数shouldHydrate = false 客户端渲染都是false,true服务端渲染用于是否复用子节点++

function legacyRenderSubtreeIntoContainer(
  parentComponent: ?React$Component<any, any>,
  children: ReactNodeList,
  container: DOMContainer,
  forceHydrate: boolean,
  callback: ?Function,
) {
 // TODO: Without `any` type, Flow says "Property cannot be accessed on any
  // member of intersection type." Whyyyyyy.
  let root: _ReactSyncRoot = (container._reactRootContainer: any);
  let fiberRoot;
  if (!root) {
    // Initial mount  根据container初始化创建ReactSyncRoot
    root = container._reactRootContainer = legacyCreateRootFromDOMContainer(
      container,
      forceHydrate,
    );
    // ReactSyncRoot._internalRoot获取fiberRoot
    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. 初始化不批量更新 直接执行fn
    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);

1. 先判断container(document.getElementById('root')是否有_reactRootContainer属性，没有则赋值创建ReactSyncRoot,legacyCreateRootFromDOMContainer

function legacyCreateRootFromDOMContainer(
  container: DOMContainer,
  forceHydrate: boolean,
): _ReactSyncRoot {
  const shouldHydrate =
    forceHydrate || shouldHydrateDueToLegacyHeuristic(container);
  // First clear any existing content. 
  if (!shouldHydrate) {
    let warned = false;
    let rootSibling;
    // ！shouldHydrate下遍历containerdom下元素，删除子元素
    while ((rootSibling = container.lastChild)) {
      container.removeChild(rootSibling);
    }
  }
  // Legacy roots are not batched.
  return new ReactSyncRoot(
    container,
    LegacyRoot,
    shouldHydrate
      ? {
          hydrate: true,
        }
      : undefined,
  );
}

++由上可以看到在非shouldHydrate下会对container dom下的子元素全部删除，所以大家在html模板下div添加子元素是无效的，最后都会被删除++

function ReactSyncRoot(
  container: DOMContainer, // 非hydrate下删除子元素的dom 
  tag: RootTag, // LegacyRoot=0类型 
  options: void | RootOptions,
) {
  // _internalRoot = FiberRoot
  this._internalRoot = createRootImpl(container, tag, options);
}

function createRootImpl(
  container: DOMContainer,
  tag: RootTag, // LegacyRoot
  options: void | RootOptions,
) {
  // Tag is either LegacyRoot or Concurrent Root
  const hydrate = options != null && options.hydrate === true;
  const hydrationCallbacks =
    (options != null && options.hydrationOptions) || null;
  const root = createContainer(container, tag, hydrate, hydrationCallbacks);
  markContainerAsRoot(root.current, container);
  if (hydrate && tag !== LegacyRoot) {
    const doc =
      container.nodeType === DOCUMENT_NODE
        ? container
        : container.ownerDocument;
    eagerlyTrapReplayableEvents(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, // document.getElementById('root') dom 
  tag: RootTag, // LegacyRoot=0
  hydrate: boolean,
  hydrationCallbacks: null | SuspenseHydrationCallbacks,
): FiberRoot {
  // 创建FiberRoot对象
  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;
  uninitializedFiber.stateNode = root;

  return root;
}

++ReactSyncRoot-createRootImpl-createContainer-createFiberRoot调用顺序，最后new FiberRootNode 创建了 tag=LegacyRoot的==FiberRoot==++

export function createHostRootFiber(tag: RootTag): Fiber {
  let mode;
  if (tag === ConcurrentRoot) {
    mode = ConcurrentMode | BatchedMode | StrictMode;
  } else if (tag === BatchedRoot) {
    mode = BatchedMode | StrictMode;
  } else {
    mode = NoMode;
  }
  if (enableProfilerTimer && isDevToolsPresent) {
    // Always collect profile timings when DevTools are present.
    // This enables DevTools to start capturing timing at any point–
    // Without some nodes in the tree having empty base times.
    mode |= ProfileMode;
  }
  return createFiber(HostRoot, null, null, mode);
}

const createFiber = function(
  tag: WorkTag, // HostRoot=3
  pendingProps: mixed,
  key: null | string,
  mode: TypeOfMode, // NoMode
): Fiber {
  // $FlowFixMe: the shapes are exact here but Flow doesn't like constructors
  return new FiberNode(tag, pendingProps, key, mode);
};

++后继续创建了tag=HostRoot,mode=NoMode的==RootFiber==对象(createHostRootFiber)++

2.从ReactSyncRoot中取出_internalRoot则创建的FiberRoot对象，第一次调用unbatchedUpdates函数来不批量更新，直接执行内部的fn

 unbatchedUpdates(() => {
      updateContainer(children, fiberRoot, parentComponent, callback);
 });
 
 export function updateContainer(
  element: ReactNodeList, // app
  container: OpaqueRoot, // fiberRoot
  parentComponent: ?React$Component<any, any>,
  callback: ?Function,
): ExpirationTime {
  // fiber的root
  const current = container.current;
  // 计算新开始的时间
  const currentTime = requestCurrentTime();
  const suspenseConfig = requestCurrentSuspenseConfig();
  // 计算过期时间，用于React优先级 异步
  const expirationTime = computeExpirationForFiber(
    currentTime,
    current,
    suspenseConfig,
  );
  return updateContainerAtExpirationTime(
    element,
    container,
    parentComponent,
    expirationTime,
    suspenseConfig,
    callback,
  );
}
   
   
export function updateContainerAtExpirationTime(
  element: ReactNodeList,
  container: OpaqueRoot,
  parentComponent: ?React$Component<any, any>,
  expirationTime: ExpirationTime,
  suspenseConfig: null | SuspenseConfig,
  callback: ?Function,
) {
  return scheduleRootUpdate(
    current,
    element,
    expirationTime,
    suspenseConfig,
    callback,
  );
} 


function scheduleRootUpdate(
  current: Fiber,
  element: ReactNodeList,
  expirationTime: ExpirationTime,
  suspenseConfig: null | SuspenseConfig,
  callback: ?Function,
) {
  // 根据expirationTime 创建更新的update
  const update = createUpdate(expirationTime, suspenseConfig);
  // Caution: React DevTools currently depends on this property
  // being called "element".
  // 设置更新payload app组件
  update.payload = {element};
  callback = callback === undefined ? null : callback;
  if (callback !== null) {
    warningWithoutStack(
      typeof callback === 'function',
      'render(...): Expected the last optional `callback` argument to be a ' +
        'function. Instead received: %s.',
      callback,
    );
    update.callback = callback;
  }
  // 把此次更新入队
  enqueueUpdate(current, update);
  // 进行任务调度
  scheduleWork(current, expirationTime);

  return expirationTime;
}
    

++-根据currentTime时间来计算expirationTime时间++

++-创建update对象,可以根据next来指向下个update++

export function createUpdate(
  expirationTime: ExpirationTime,
  suspenseConfig: null | SuspenseConfig,
): Update<*> {
  let update: Update<*> = {
    expirationTime,
    suspenseConfig,
    tag: UpdateState,
    payload: null,
    callback: null,
    next: null,
    nextEffect: null,
  };
  return update;
}

++-把update对象放入到updateQueue中++

++-scheduleWork进入任务调度中++

Todo:expirationTime会在后续说明

Todo:update,updateQueue会在后续说明

总结：

• 创建了 ReactRoot对象
• 创建了FiberRoot，FiberRoot=ReactRoot._internalRoot
• 创建了RootFiber，FiberRoot.current=RootFiber
• 创建 update
• update入队，scheduleWork进入调度阶段

注：在render的第二个参数dom，在客户端渲染会删除掉全部的子元素