React source code: reactdom.render

This article takes a look at the process of ReactDOM. Render, the react app entry. ReactDOM. Render does three things: create the root fiber node for the entire application: fiberRoot, handle the composite events, and mount the application.

Render method will call legacyRenderSubtreeIntoContainer method

function legacyRenderSubtreeIntoContainer(parentComponent, children, container, forceHydrate, callback) {
  var root = container._reactRootContainer;
  var fiberRoot;

  if(! root) {// Create the root node for the first time
    root = container._reactRootContainer = legacyCreateRootFromDOMContainer(container, forceHydrate);
    fiberRoot = root._internalRoot;
    // Mount the application
    unbatchedUpdates(function () {
      updateContainer(children, fiberRoot, parentComponent, callback);
    });
  } else {
    / /...
  }
  return getPublicRootInstance(fiberRoot);
}
Copy the code

LegacyCreateRootFromDOMContainer method source code is as follows

function legacyCreateRootFromDOMContainer(container, forceHydrate) {
  if(! shouldHydrate) {var warned = false;
    var rootSibling;

    while (rootSibling = container.lastChild) {
      {
        if(! warned && rootSibling.nodeType === ELEMENT_NODE && rootSibling.hasAttribute(ROOT_ATTRIBUTE_NAME)) { warned =true;
          error('render(): Target node has markup rendered by React, but there ' + 'are unrelated nodes as well. This is most commonly caused by ' + 'white-space inserted around server-rendered markup.'); }}// Clear the DOM elements in the root nodecontainer.removeChild(rootSibling); }}/ /...
  return createLegacyRoot(container, shouldHydrate ? {
    hydrate: true
  } : undefined);
}
Copy the code

This method clears the DOM nodes in the root element, and after a series of method calls, it comes to createRootImpl

function createRootImpl(container, tag, options) {
  // ...
  var root = createContainer(container, tag, hydrate);
  {
    var rootContainerElement = container.nodeType === COMMENT_NODE ? container.parentNode : container;
    listenToAllSupportedEvents(rootContainerElement);
  }
  // ...
  return root;
}
Copy the code

This approach does two main things: create fiberRoot, and process the composite events. Corresponding createContainer method and listenToAllSupportedEvents method. The principle of synthesizing events will be described in the article.

At this point, legacyCreateRootFromDOMContainer method is performed, then began to mount the whole application, enter the updateContainer method (unbatchedUpdates skip) first. The updateContainer method starts the update by calling the scheduleUpdateOnFiber method (which updates the react application entry).

ScheduleUpdateOnFiber ();

if( (executionContext & LegacyUnbatchedContext) ! == NoContext && (executionContext & (RenderContext | CommitContext)) === NoContext) {// reactdom.render enters here
  schedulePendingInteractions(root, lane);
  performSyncWorkOnRoot(root);
} else {
  // Follow up updates here
  ensureRootIsScheduled(root, eventTime);
  schedulePendingInteractions(root, lane);

  if(executionContext === NoContext) { resetRenderTimer(); flushSyncCallbackQueue(); }}Copy the code

Now let’s look at the unbatchedUpdates method

function unbatchedUpdates(fn, a) {
  var prevExecutionContext = executionContext;
  executionContext &= ~BatchedContext;
  executionContext |= LegacyUnbatchedContext;

  try {
    return fn(a);
  } finally {
    executionContext = prevExecutionContext;
    // ...}}Copy the code

UnbatchedUpdates method carried out — an optional executionContext | = LegacyUnbatchedContext, so after the unbatchedUpdates method, executionContext & LegacyUnbatchedContext) ! == NoContext is true, and RenderContext and CommitContext are set in the render and Commit phases, So — an optional executionContext & (RenderContext | CommitContext)) = = = NoContext to true. Then performSyncWorkOnRoot is entered (subsequent updates will also call performSyncWorkOnRoot, but in a different way).

There are two important method calls to performSyncWorkOnRoot: renderRootSync and commitRoot, which correspond to the entry of render and COMMIT phases, respectively. There are articles devoted to this.

This article explains the process of ReactDOM. Render, which is the entrance to react. The synthesis event, render and commit phases are mentioned here.