react源码分析

ReactMount.render -> ReactMount._renderSubtreeIntoContainer

-> ReactMount._renderNewRootComponent -> ReactMount.batchedMountComponentIntoNode

-> ReactReconciler.mountComponent -> ReactDomComponent.mountComponent

-> ReactDomComponent._createContentMarkup ->ReactMultiChild.mountChildren

-> ReactMount._mountImageIntoNode -> ReactMount.setInnerHTML

ReactMount._mountImageIntoNode负责将virtualdom实际mount到dom上，

先是用ReactMarkupChecksum.canReuseMarkup检查是不是可以复用的markup

/**
* Mounting is the process of initializing a React component by creating its
* representative DOM elements and inserting them into a supplied `container`.
* Any prior content inside `container` is destroyed in the process.
*
*   ReactMount.render(
*     component,
*     document.getElementById('container')
*   );
*
*   <div id="container">                   <-- Supplied `container`.
*     <div data-reactid=".3">              <-- Rendered reactRoot of React
*       // ...                                 component.
*     </div>
*   </div>
*
* Inside of `container`, the first element rendered is the "reactRoot".
*/

if (transaction.useCreateElement) {
while (container.lastChild) {
container.removeChild(container.lastChild);
}
container.appendChild(markup);
} else {
setInnerHTML(container, markup);
}

Transaction

/*
* Use cases:
* - Preserving the input selection ranges before/after reconciliation.
*   Restoring selection even in the event of an unexpected error.
* - Deactivating events while rearranging the DOM, preventing blurs/focuses,
*   while guaranteeing that afterwards, the event system is reactivated.
* - Flushing a queue of collected DOM mutations to the main UI thread after a
*   reconciliation takes place in a worker thread.
* - Invoking any collected `componentDidUpdate` callbacks after rendering new
*   content.
* - (Future use case): Wrapping particular flushes of the `ReactWorker` queue
*   to preserve the `scrollTop` (an automatic scroll aware DOM).
* - (Future use case): Layout calculations before and after DOM updates.
*
* Transactional plugin API:
* - A module that has an `initialize` method that returns any precomputation.
* - and a `close` method that accepts the precomputation. `close` is invoked
*   when the wrapped process is completed, or has failed.
*
* @param {Array<TransactionalWrapper>} transactionWrapper Wrapper modules
* that implement `initialize` and `close`.
* @return {Transaction} Single transaction for reuse in thread.
*
* @class Transaction
*/