render: function(nextElement, container, callback) {
  return ReactMount._renderSubtreeIntoContainer(
    null,
    nextElement,
    container,
    callback,
  );
},Copy the code

And transferred to _renderSubtreeIntoContainer method, this method is the core content is as follows:

This method is used to retrieve the existing top-level container component, as shown below.

function getTopLevelWrapperInContainer(container) { var root = getHostRootInstanceInContainer(container); return root ? root._hostContainerInfo._topLevelWrapper : null; } function getHostRootInstanceInContainer(container) { var rootEl = getReactRootElementInContainer(container); var prevHostInstance = rootEl && ReactDOMComponentTree.getInstanceFromNode(rootEl); return prevHostInstance && ! prevHostInstance._hostParent ? prevHostInstance : null; }Copy the code

Call the two methods, getReactRootElementInContainer and ReactDOMComponentTree getInstanceFromNode.

getReactRootElementInContainer

function getReactRootElementInContainer(container) {
  if (!container) {
    return null;
  }
  if (container.nodeType === DOCUMENT_NODE) {
    return container.documentElement;
  } else {
    return container.firstChild;
  }
}Copy the code

ReactDOMComponentTree

This module has three methods, which are:

• precacheChildNodesStore the React instance on the DOM node
• getNodeFromInstanceGet the corresponding DOM node from an instance
• getInstanceFromNodeGet the corresponding instance from a DOM node

This method is the core of _renderSubtreeIntoContainer, used to mount a new component to the DOM.

_renderNewRootComponent: function( nextElement, container, shouldReuseMarkup, context, callback, Through instantiateReactComponent) {/ / get the React Component Component instance var componentInstance = instantiateReactComponent(nextElement, false); if (callback) { componentInstance._pendingCallbacks = [ function() { validateCallback(callback); callback.call( componentInstance._renderedComponent.getPublicInstance(), ); }, ]; } // The initial render is synchronous but any updates that happen during // rendering, in componentWillMount or componentDidMount, will be batched // according to the current batching strategy. ReactUpdates.batchedUpdates( batchedMountComponentIntoNode, componentInstance, container, shouldReuseMarkup, context, ); var wrapperID = componentInstance._instance.rootID; instancesByReactRootID[wrapperID] = componentInstance; return componentInstance; },Copy the code

Core code:

var ReactHostComponentInjection = { // This accepts a class that receives the tag string. This is a catch all // that can render any kind of tag. injectGenericComponentClass: function(componentClass) { genericComponentClass = componentClass; }, // This accepts a text component class that takes the text string to be // rendered as props. injectTextComponentClass: function(componentClass) { textComponentClass = componentClass; }}; function createInternalComponent(element) { invariant( genericComponentClass, 'There is no registered component for the tag %s', element.type, ); return new genericComponentClass(element); } /** * @param {ReactText} text * @return {ReactComponent} */ function createInstanceForText(text) { return new textComponentClass(text); }Copy the code

Two methods are provided to create components, and the implementation of two component classes is injected from other modules. After a search, found to be in ReactDOMStackInjection. Injected in js, we look at the code:

var ReactComponentEnvironment = require('ReactComponentEnvironment');
var ReactComponentBrowserEnvironment = require('ReactComponentBrowserEnvironment');
var ReactDOMComponent = require('ReactDOMComponent');
var ReactDOMComponentTree = require('ReactDOMComponentTree');
var ReactDOMEmptyComponent = require('ReactDOMEmptyComponent');
var ReactDOMTextComponent = require('ReactDOMTextComponent');
var ReactDefaultBatchingStrategy = require('ReactDefaultBatchingStrategy');
var ReactEmptyComponent = require('ReactEmptyComponent');
var ReactGenericBatching = require('ReactGenericBatching');
var ReactHostComponent = require('ReactHostComponent');
var ReactReconcileTransaction = require('ReactReconcileTransaction');
var ReactUpdates = require('ReactUpdates');
var findDOMNode = require('findDOMNode');
var getHostComponentFromComposite = require('getHostComponentFromComposite');
ReactGenericBatching.injection.injectStackBatchedUpdates(
  ReactUpdates.batchedUpdates,
);
ReactHostComponent.injection.injectGenericComponentClass(ReactDOMComponent);
ReactHostComponent.injection.injectTextComponentClass(ReactDOMTextComponent);
ReactEmptyComponent.injection.injectEmptyComponentFactory(function(
  instantiate,
) {
  return new ReactDOMEmptyComponent(instantiate);
});
ReactUpdates.injection.injectReconcileTransaction(ReactReconcileTransaction);
ReactUpdates.injection.injectBatchingStrategy(ReactDefaultBatchingStrategy);
ReactComponentEnvironment.injection.injectEnvironment(
  ReactComponentBrowserEnvironment,
);
findDOMNode._injectStack(function(inst) {
  inst = getHostComponentFromComposite(inst);
  return inst ? ReactDOMComponentTree.getNodeFromInstance(inst) : null;
});Copy the code

You can see, this module by ReactHostComponent. Injection injected ReactDOMComponent and ReactDOMTextComponent. Some other modules are also injected, which we’ll use later.

Here the ReactDOMComponent and ReactDOMTextComponent are the real DOM tag generating modules. They are too much content, but the code is relatively simple and I won’t go into details here. Calling the mountComponent method of both modules generates DOM Markup. The difference is that the ReactDOMComponent will have the Markup of the following structure

{
  node: node,
  children: [],
  html: null,
  text: null,
  toString
}Copy the code

The ReactDOMTextComponent directly generates the String text to render in the DOM.

function batchedUpdates(callback, a, b, c, d, e) {
  ensureInjected();
  return batchingStrategy.batchedUpdates(callback, a, b, c, d, e);
}Copy the code

ReactUpdates call batchedUpdate with batchingStrategy. The batchingStrategy is also injected with the ReactDOMStackInjection described earlier.

ReactUpdates.injection.injectReconcileTransaction(ReactReconcileTransaction);
ReactUpdates.injection.injectBatchingStrategy(ReactDefaultBatchingStrategy);Copy the code

ReactUpdates were injected into the two modules, respectively is ReactReconcileTransaction and ReactDefaultBatchingStrategy.

To look at the first ReactDefaultBatchingStrategy, behind ReactReconcileTransaction met again, take a look at its code:

var ReactUpdates = require('ReactUpdates'); var Transaction = require('Transaction'); var emptyFunction = require('fbjs/lib/emptyFunction'); var RESET_BATCHED_UPDATES = { initialize: emptyFunction, close: function() { ReactDefaultBatchingStrategy.isBatchingUpdates = false; }}; var FLUSH_BATCHED_UPDATES = { initialize: emptyFunction, close: ReactUpdates.flushBatchedUpdates.bind(ReactUpdates), }; var TRANSACTION_WRAPPERS = [FLUSH_BATCHED_UPDATES, RESET_BATCHED_UPDATES]; function ReactDefaultBatchingStrategyTransaction() { this.reinitializeTransaction(); } Object.assign(ReactDefaultBatchingStrategyTransaction.prototype, Transaction, { getTransactionWrappers: function() { return TRANSACTION_WRAPPERS; }}); var transaction = new ReactDefaultBatchingStrategyTransaction(); var ReactDefaultBatchingStrategy = { isBatchingUpdates: false, /** * Call the provided function in a context within which calls to `setState` * and friends are batched such that components aren't updated unnecessarily. */ batchedUpdates: function(callback, a, b, c, d, e) { var alreadyBatchingUpdates = ReactDefaultBatchingStrategy.isBatchingUpdates; ReactDefaultBatchingStrategy.isBatchingUpdates = true; // The code is written this way to avoid extra allocations if (alreadyBatchingUpdates) {// If current updates were completed, Callback callback(a, b, c, d, e); Perform (callback, null, a, b, c, d, e); }}};Copy the code

. You can see our previous call ReactUpdates batchUpdates batchedUpdates actually calls are here, the inside of the logic is simple.

There is a transaction method that is used. That is, if an update is currently in progress, the callback is called transactionally.

function mountComponentIntoNode(
  wrapperInstance,
  container,
  transaction,
  shouldReuseMarkup,
  context,
) {
  var markup = ReactReconciler.mountComponent(
    wrapperInstance,
    transaction,
    null,
    ReactDOMContainerInfo(wrapperInstance, container),
    context,
    0 /* parentDebugID */,
  );
  wrapperInstance._renderedComponent._topLevelWrapper = wrapperInstance;
  ReactMount._mountImageIntoNode(
    markup,
    container,
    wrapperInstance,
    shouldReuseMarkup,
    transaction,
  );
}Copy the code

Here you see operations on the key markup variable, which is the object we will eventually render into the DOM. Through ReactReconciler. MountComponent method to get the markup. ReactReconciler. MountComponent source code is as follows:

mountComponent: function( internalInstance, transaction, hostParent, hostContainerInfo, context, parentDebugID, // 0 in production and for roots ) { var markup = internalInstance.mountComponent( transaction, hostParent, hostContainerInfo, context, parentDebugID, ); if ( internalInstance._currentElement && internalInstance._currentElement.ref ! = null ) { transaction.getReactMountReady().enqueue(attachRefs, internalInstance); } return markup; },Copy the code

It calls the internalInstance mountComponent, internalInstance here is actually said is obtained by instantiateReactComponent React in front of the Component instance.

// _renderNewRootComponent
var componentInstance = instantiateReactComponent(nextElement, false)Copy the code

Here nextElement is the React root element to render.

// _renderSubtreeIntoContainer
    var nextWrappedElement = React.createElement(TopLevelWrapper, {
      child: nextElement,
    });Copy the code

The implementation of TopLevelWrapper needs to pay attention to its render method.

var TopLevelWrapper = function() {
  this.rootID = topLevelRootCounter++;
};
TopLevelWrapper.prototype.isReactComponent = {};
TopLevelWrapper.prototype.render = function() {
  return this.props.child;
};
TopLevelWrapper.isReactTopLevelWrapper = true;Copy the code

This.props. Child = nextElement (
, document.getelementByid (‘root’)); The inside of the < App / >.

The inside of the back ReactReconciler. MountComponent internalInstance mountComponent. Return through said instantiateReactComponent we know in front of three components:

1. ReactDOMComponent
2. ReactDOMTextComponent
3. ReactCompositeComponent

The first two classes are simple. They are elements of the DOM itself, and eventually render their corresponding Markup. ReactCompositeComponent is more complex, so let’s just look at the key code:

//ReactCompositeComponent.mountComponent var Component = this._currentElement.type; var updateQueue = transaction.getUpdateQueue(); // Initialize the public class var doConstruct = shouldConstruct(Component); var inst = this._constructComponent( doConstruct, publicProps, publicContext, updateQueue, ); var renderedElement; if (! doConstruct && (inst == null || inst.render == null)) { renderedElement = inst; inst = new StatelessComponent(Component); this._compositeType = ReactCompositeComponentTypes.StatelessFunctional; } else {. . } markup = this.performInitialMount( renderedElement, hostParent, hostContainerInfo, transaction, context, );Copy the code

First get inst, get inst the call stack is this: enclosing _constructComponent – > enclosing _constructComponentWithoutOwner

// this._constructComponentWithoutOwner ... var Component = this._currentElement.type; if (doConstruct) { if (__DEV__) { return measureLifeCyclePerf( () => new Component(publicProps, publicContext, updateQueue), this._debugID, 'ctor', ); } else { return new Component(publicProps, publicContext, updateQueue); }}...Copy the code

CurrentElement. Type is the class inherited from react.component.component.component.function. RenderElement is then declared, with renderElement = inst for stateless (pure render component declared by function) components, undefined otherwise.

And then performInitialMount,

if (renderedElement === undefined) { renderedElement = this._renderValidatedComponent(); } var nodeType = ReactNodeTypes.getType(renderedElement); this._renderedNodeType = nodeType; var child = this._instantiateReactComponent( renderedElement, nodeType ! == ReactNodeTypes.EMPTY /* shouldHaveDebugID */, ); this._renderedComponent = child; var markup = ReactReconciler.mountComponent( child, transaction, hostParent, hostContainerInfo, this._processChildContext(context), debugID, );Copy the code

For non-Stateless components, renderedElement needs to be assigned. The call stack is: the enclosing _renderValidatedComponent – > enclosing _renderValidatedComponentWithoutOwnerOrContext

_renderValidatedComponentWithoutOwnerOrContext: function() {
  var inst = this._instance;
  var renderedElement;
  if (__DEV__) {
    renderedElement = measureLifeCyclePerf(
      () => inst.render(),
      this._debugID,
      'render',
    );
  } else {
    renderedElement = inst.render();
  }
  if (__DEV__) {
    // We allow auto-mocks to proceed as if they're returning null.
    if (renderedElement === undefined && inst.render._isMockFunction) {
      // This is probably bad practice. Consider warning here and
      // deprecating this convenience.
      renderedElement = null;
    }
  }
  return renderedElement;
},Copy the code

We end up with renderedElement after Inst.render ().

Then go down the child = this. _instantiateReactComponent (renderedElement) and markup = ReactReconciler. MountComponent (child,…). .

Can relate to, and here is the cycle of recursive calls ReactReconciler. MountComponent, know the child is not ReactCompositeComponent so far, The data structure for the final MarkUp. MarkUp can be found in DOMLazyTree:

// DOMLazyTree
{
  node: node,
  children: [],
  html: null,
  text: null,
  toString,
}Copy the code

Once you have the MarkUp, the final step is to mount the MarkUp into the actual DOM via reactmount._mountimageintonode.

The React and ReactDOM code is very abstract, which makes the code very complicated to read. This article is also limited to the overall process and does not delve into details because there are too many details.

Finally, a reactdom. render post-execution process diagram is sorted out, which can help to understand its whole process to a certain extent: the diagram is very large, and it is not clear even after clicking to enlarge it. It is suggested to save it and browse it locally, it will be clearer.

ReactDOM.render