react源代码重点难点分析
網上已經有不少react源碼分析文檔，但都是分析主流程和主要功能函數，沒有一個是從reactDOM.render()入口開始分析源碼把流程邏輯走通尤其是把重點難點走通直到把組件template編譯插入網頁生效結束這樣一個從頭到尾的完整過程。本文從ReactDom.Render()入口開始追蹤分析源碼直到網頁顯示hello world(ajax從后臺獲取數據之后被替換為字符串)的整個處理流程，主要針對整個流程中重點難點細節環節分析源碼是如何從頭走到尾直到輸出顯示hello world的，本文忽略所有的功能段詳細代碼，有興趣可以自己再行研究，不是本文重點，每個功能段的深入研究屬于縱向研究，比如判斷是否要update具體如何update(diff算法)等功能段，都已經有高手研究發表過文章。
從入口開始到最后顯示hello world的處理流程邏輯過程非常復雜，有無數層封裝，有一個程序要遞歸執行，有幾段程序要被反復調用，要調用執行100多個函數分布在10幾個文件中，尤其是react增加了transaction機制就更復雜了，跟天書一樣。
react源碼設計太復雜，reac和angular都是專業團隊開發的，編程技術都是頂級的，但它們都不是簡單高明的設計，有些復雜設計華而不實。比如angular內部模塊機制和依賴對象注入機制搞太復雜，其實依賴對象就是全局共享對象，在各組件用import引用即可，沒必要搞那么復雜，毫無意義，用webpack開發之后，angular內部的模塊機制和依賴對象注入機制就毫無意義，所以angular 2.0也不再搞這些巨復雜又沒有用的東西。再比如vue用compile遞歸編譯所有的元素節點，而react把元素分成幾種類型，每種類型有不同的mountComponent編譯程序，還有performUpdateIfNecessary也按類型分好幾種，源碼中執行instance.mountComponent()時不知道是哪一種mountComponent，要debug看才能知道，所以debug跟蹤react源碼很困難。實際上元素類型除了html元素就是自定義組件標簽，沒必要分類搞那么多mountComponent，個人認為vue的設計是簡單高明的，相比之下vue用簡單的編程方法也能實現同樣的功能甚至更多的功能，給廣大程序員又多了一種選擇。順便說到，vue的數據響應設計方法也是最簡單實用的，它沒有直接使用redux再connect，而是開發了一套挺簡單的vuex代碼集成到vue就把難題給完美解決了，使用非常簡單自然，幾乎把專業頂級的高大上的react和angular給顛覆了。
react源碼分布在幾十個文件中，找函數代碼要在這批文件中搜索出來，這無所謂，就算是寫在一個文件中有幾萬行，也是要搜索找函數的，其中最重要的源碼文件如下：
React.js
ReactClass.js
ReactElement.js
ReactDOM.js
ReactMount.js
instantiateReactComponent.js
ReactComponent.js
ReactDOMComponent.js
ReactCompositeComponent.js
ReactReconciler.js
ReactUpdates.js
Transaction.js
還有react-redux兩個文件：
connect.js
provider.js
?
首先，有必要啰嗦一下有關js編程的核心技術方法，在源碼中，凡是var xxx={}，這是要干嘛？一般來說就是定義屬性，要合并到一個類中去。js用函數和prototype屬性模擬類的實現，用new 函數()實例化類。在源碼中凡是有： function xxx(){} xxx.prototype=yyy 這是要干嘛？這就是定義一個類，這個類被使用的方法有兩種： 一種是new xxx()實例化。 一種是被其它類繼承合并，js沒有類也沒有類繼承方法，都是用js對象復制或引用來實現的，js的核心對象技術就是Object.xxx()方法。
js編程玩來玩去其實就是這點技術，但代碼寫復雜了會看暈，因為開發框架源碼封裝太多太復雜，流程邏輯太復雜，細節處理太多太復雜，再加上js有call/apply進行作用域變換，每段代碼中的this在執行的時候到底代表哪個對象實例就可能暈菜了。
首先描述一下測試項目基本環境和細節，測試項目采用minimum項目，只有一個/路由組件，顯示<div>hello world</div>，如果ajax從后臺獲取到數據，則顯示從后臺獲取的一個字符串，組件使用redux的store數據。
react項目入口代碼：
ReactDOM.render(
<Provider store={store}>
<Router history={history} children={routes} />
</Provider>,
MOUNT_NODE
?
路由routes.js代碼：
import { injectReducer } from 'REDUCER'
import createContainer from 'UTIL/createContainer'
const connectComponent = createContainer(
({ userData, msg }) => ({ userData, msg }),
require('ACTION/msg').default
)
export default {
path: '/',
getComponent (nextState, cb) {
require.ensure([], (require) => {? ??//異步加載組件
injectReducer('msg', require('REDUCER/msg/').default)? // 建立store['msg']=reduce方法
cb(null, connectComponent(require('COMPONENT/App').default))??
}, 'App')
}
}
/路由組件App.js代碼：
import React, { Component } from 'react'
export default class App extends Component {
componentWillMount () {
let _this = this
setTimeout(function() {
_this.props.fetchMsg()? // 通過ajax從后臺獲取字符串保存到store，網頁先顯示hello world，之后會自動更新為新的字符串
}, 2000)
}
componentWillReceiveProps (nextProps) {
console.log(this)
}
render () {
return (
<div>{ this.props.msg.msgs[0] ? this.props.msg.msgs[0].content : 'hello world' }</div>
)
}
}
?
react項目入口方法是：
ReactDOM.render(根組件template)
相當于vue 1.0的router.start(app)或vue 2.0的new Vue(app)。
?
ReactDOM.render方法代碼:
function (nextElement, container, callback) {
return ReactMount._renderSubtreeIntoContainer(null, nextElement, container, callback);
},
_renderSubtreeIntoContainer: function (parentComponent, nextElement, container, callback) {
var nextWrappedElement = ReactElement(TopLevelWrapper, null, null, null, null, null, nextElement); // 構造一個Element，第一次是構造toplevel Element
//React.createElement創建ReactElement對象(vnode)，含有type,key,ref,props屬性，這個過程中會調用getInitialState()初始化state。
var component = ReactMount._renderNewRootComponent(nextWrappedElement, container, shouldReuseMarkup, nextContext)._renderedComponent.getPublicInstance();
return component;
產生的component就是根組件，根組件中第一個節點就是provider組件，里面有層層子節點，有/路由組件，每個element元素/組件有props屬性和type(構造函數)。
那么是從這里開始層層遞歸到/路由組件節點的。
?
_renderNewRootComponent: function (nextElement, container, shouldReuseMarkup, context) {
//nextelement就是根元素節點provider組件元素
var componentInstance = instantiateReactComponent(nextElement, false); //element -> instance
function instantiateReactComponent(node, shouldHaveDebugID) { //這個方法是根據Element產生warpper instance，再執行instance.mountComponent開始編譯組件節點
//instance = new ReactCompositeComponentWrapper(element); //這句相當于是下面一句
instance = new this.construct(element); // 這是instance的構造函數，就是設置一些屬性，很普通
var ReactCompositeComponentMixin = { // 這是instace構造函數代碼
construct: function (element) {
this.xxx = yyy;
}
}
return instance;
//instantiateReactComponent根據ReactElement的type分別創建ReactDOMComponent， ReactCompositeComponent，ReactDOMTextComponent等對象，
//不同的對象instance有不同的mountComponent方法，所以react源碼文件有無數個mountComponent函數，其實html元素節點可以不當做component處理
//instantiateReactComponent被調用執行多次，每次被調用就處理一個元素節點產生一個instance，在本例minimum項目中，產生如下instance：
_instance:TopLevelWrapper
_instance:Provider // provide節點
_instance:Constructor // router節點
_instance:Constructor
_instance:Connect // /路由組件外層
_instance:App //這是/路由組件實例
ReactUpdates.batchedUpdates(batchedMountComponentIntoNode, componentInstance, container, shouldReuseMarkup, context); //從根元素provider開始編譯處理
至此處理結束，根組件template已經編譯插入網頁生效，已經從根元素遞歸處理到最底層元素，所以處理root元素很簡單，復雜在于從root元素遞歸處理子節點再層層返回。
?
batchedUpdates會調用batchedMountComponentIntoNode，從這個函數開始追蹤：
function batchedMountComponentIntoNode(componentInstance, container, shouldReuseMarkup, context) { //從根元素provider開始
//batchedMountComponentIntoNode以transaction事務的形式調用mountComponentIntoNode
transaction.perform(mountComponentIntoNode, null, componentInstance, container, transaction, shouldReuseMarkup, context);
function mountComponentIntoNode(wrapperInstance, container, transaction, shouldReu //從根元素provider開始
var markup = ReactReconciler.mountComponent(wrapperInstance, transaction, //mountComponent相當于compile，從根節點開始編譯
//Reconciler.mountComponent就是執行instance里面的mountComponent，在執行performInitialMount時會遞歸調用自己。
//mountComponent的目的是解析得到每個節點的HTML代碼（最后插入網頁生效），react叫做markup，是類似vue的vnode對象。
Reconciler.mountComponent: function (internalInstance, transaction,?
var markup = internalInstance.mountComponent(transaction, hostParent, hostContainerInfo, context, parentDebugID);
return markup;
// internalInstance是不同的component實例，最典型的component節點類型是html元素節點比如<div>和組件元素節點比如<App>
Reconciler.mountComponent會遞歸調用自己完成從根元素遞歸到最底層元素<div>，是react源碼的最核心最關鍵最牛的代碼，因為前端代碼要遞歸html元素tree，這是與后臺代碼不同的，也是非常復雜的，一旦遞歸元素tree，就要開始暈菜了，但代碼效率巨高，一個遞歸就完事了，對于元素tree也只有用遞歸，除非定死了只有兩三層可以不用遞歸，就可以楞寫三層。
?
不同的instance有不同的mountComponent方法，我們先來看組件元素的mountComponent編譯方法：
mountComponent: function (transaction, hostParent, hostContainerInfo, context) { //mountComponent其實就是編譯節點的意思，react把一切節點視為component
var publicProps = this._currentElement.props;
var inst = this._constructComponent(doConstruct, publicProps, publicContext, updateQueue);
//inst就是new組件實例，那么是在mountComponent階段初始化組件實例的，new組件實例之后，執行其render()方法就又產生Element，就又需要遞歸循環element -> instance -> instance.mountComponent -> inst(組件實例) -> render() -> element 如此遞歸到子節點
_constructComponent: function (doConstruct, publicProps, publicContext, updateQueue) {
return this._constructComponentWithoutOwner(doConstruct, publicProps, publicContext, updateQueue);
_constructComponentWithoutOwner: function (doConstruct, publicProps, publicContext, updateQueue) {
var Component = this._currentElement.type; //type就是組件構造函數（組件定義代碼）
return new Component(publicProps, publicContext, updateQueue); //App組件外套connect組件，這就是new Connect()組件實例的位置，找到這個位置在分析react源碼的道路上就前進了一大步，因為組件定義代碼無外乎就是定義一些屬性，框架肯定準備了一個組件基類，到時一合并，再new實例，這是js唯一的機制，不可能有其它方法，找到這個位置，再前后去追蹤，就有較大的可能能看懂框架到底是如何初始化組件實例的，我們定義的組件代碼到底到底是何時如何被執行的。
inst.props = publicProps; // double set this.props
this._instance = inst; //new組件實例保存在instance中，只要執行instance的方法，就可以從this取回inst實例，再執行inst實例里面的render()方法產生一個Element遞歸下去
markup = this.performInitialMount(renderedElement, hostParent, hostContainerInfo, transaction, context);
//inst保存在this實例中，調用performInitialMount時無需傳遞inst，renderedElement是空的
return markup; //markup就是編譯產生的結果，相當于vnode，含html代碼
performInitialMount: function (renderedElement, hostParent, hostContainerInfo, transaction, context) {
renderedElement = this._renderValidatedComponent(); //執行inst.render()產生Element，每種組件inst有自己的render方法，provder/router/connect/app組件都有自己的render方法，app的render方法是應用寫的，系統組件的render方法都是事先設計好的，比如connect的render方法，還有一個router-context組件
//app的render方法里面是jsx語法，編譯時每個節點已經轉換為createElement()，所以render方法就是返回一個根元素Element，它里面有多少子元素再遞歸處理
var child = this._instantiateReactComponent(renderedElement,? ? //根據元素類型生成instance
this._renderedComponent = child;
var markup = ReactReconciler.mountComponent(child, // 在這里遞歸調用Reconciler.mountComponent，處理下一個子節點child，是前面根據Element生成的
return markup;
?
這是組件component的mountComponet編譯方法，再來看html元素component的mountComponent編譯方法：
//ReactDOMComponent是針對html元素，在這個minimum項目中，根組件template中只有一個<div>元素節點
ReactDOMComponent.Mixin = {
mountComponent: function (transaction, hostParent, hostContainerInfo, context) { //只針對<div>執行一次
var props = this._currentElement.props; // 當前元素是div，子節點就是文本內容hello world
if (hostParent != null) {
} else if (hostContainerInfo._tag) {
namespaceURI = hostContainerInfo._namespaceURI;
parentTag = hostContainerInfo._tag;
}
if (transaction.useCreateElement) { //為true
if (namespaceURI === DOMNamespaces.html) {
} else {
el = ownerDocument.createElementNS(namespaceURI, this._currentElement.type); // el就是空的div
}
}
if (!this._hostParent) {
DOMPropertyOperations.setAttributeForRoot(el);
}
this._updateDOMProperties(null, props, transaction);
var lazyTree = DOMLazyTree(el); //子節點hello world文本內容已經插入到tree.node中
this._createInitialChildren(transaction, props, context, lazyTree);
mountImage = lazyTree;
return mountImage; //返回已經插入文本內容的node對象（相當于vue的vnode)
再回到mountComponentIntoNode看Reconciler.mountComponent從根元素provider開始遞歸編譯子節點之后再執行什么：
function mountComponentIntoNode(wrapperInstance, container, transaction, shouldReu?
var markup = ReactReconciler.mountComponent(wrapperInstance, transaction,
ReactMount._mountImageIntoNode(markup, container, wrapperInstance, shouldReuseMarkup, transaction);
//從根元素開始遞歸編譯react內部的元素比如provider/router，一直到app組件到最底層的div元素節點，markup就是從最底層返回的編譯結果，就是<div>hello world</div>，但是以對象vnode方式表示的。
但debug看markup是comment，編譯到router組件就結束返回了，這是這么回事？這個問題非常復雜，是因為本項目使用了異步加載組件，當遞歸編譯router組件時，返回comment z占位元素插入網頁，同時去異步加載組件文件，然后再繼續遞歸編譯router組件，繼續遞歸編譯到app組件，最后返回編譯結果再插入網頁替換之前的comment生效。
如果不用異步加載，就沒這個問題，從根元素一直遞歸到div元素結束返回markup=div(含hello world)，異步加載改變/干擾了正常的流程邏輯。
?
順便提一下，對于異步加載，webpack在編譯打包時是用webpackJsonp實現的，#.build.js文件是配合webpackJsonp構造的，打包文件中也在全局空間定義了一個window.webpackJsonp函數方法，因為是用<script src=#.build.js 加載模塊文件，必須在全局空間定義webpackJsonp方法，從服務端返回回調此方法時傳遞模塊代碼再保存到打包代碼build.js中的閉包函數中的modules[]中。為什么要用jsonp這么麻煩是因為它不是要在全局加載執行js文件，而是要加載文件獲取模塊代碼保存到閉包函數中的modules[]中，框架的所有代碼都是在閉包中執行，打包文件build.js代碼結構是：
(function(modules) { // webpackBootstrap
window["webpackJsonp"] = function webpackJsonpCallback(chunkIds, moreModules) { // server端返回時調用，傳入模塊數據
modules[moduleId] = moreModules[moduleId]; // 把server端返回的模塊保存到閉包中的modules[]中
}
}
)([模塊,模塊,...]);
?
組件編譯完成之后插入網頁有可能替換占位元素，也可能是插入到占位元素之后，或者是插入到占位元素的父元素里面做為父元素的子元素，如果comment占位元素已經被替換/刪除了，之后再更新時就找container元素的第一個子節點替換之，這取決于底層插入代碼是如何設計的。
mountComponentIntoNode只執行一次，它是編譯根組件插入到網頁中container元素<div id="app">里面，markup是根組件的編譯結果<div>hello world</div>。
根組件編譯插入網頁之后是不會被切換的，只是會重新編譯更新，而<router>標簽意味著router組件會切換路由應用組件插入到這個位置顯示，那么每次路由切換時從router
組件開始遞歸編譯處理路由應用組件，插入到router元素占位元素位置替換調原來的內容，路由應用組件的插入位置就是router元素的占位元素位置，占位元素可以用comment，也可以用container.firstchild做為插入替換位置，如果只是更新應用組件，則不同于切換組件，因為組件已經在網頁顯示，只是如何更新的問題，有可能只是更新組件的局部，不需要把組件整個重新插入到網頁中，就需要在網頁container找組件根節點找子節點插入替換。
在遞歸過程中當編譯處理router組件時會遞歸編譯處理/路由組件也就是app組件及其子節點，會展開另外一個流程，屬于路由切換處理流程，由router組件負責處理，不在上面這個邏輯里面，上面這個邏輯只是編譯處理根組件根元素。
當遞歸編譯子節點到最底層<div>元素完成之后層層返回時，由于編譯處理是套了一層transaction.perform，是在transaction機制里面執行，每次遞歸編譯處理完之后會返回到transaction.perform，這是react設計最復雜深奧的環節：
transaction.perform會被多次執行，method會不斷變化，當某一次執行到：
ret = method.call(scope, a, b, c, d, e, f method=runBatchedUpdates(transaction
之后網頁顯示hello world，說明編譯之后是執行runBatchedUpdates插入網頁生效的，而不是mountImage。
下面是runBatchedUpdates流程：
function runBatchedUpdates(transaction) {
ReactReconciler.performUpdateIfNecessary(component, transaction.reconcile //執行這句之后網頁顯示hello world
performUpdateIfNecessary跟mountComponent一樣也是不同類型的元素有不同的方法，組件的方法是：
performUpdateIfNecessary: function (transaction) {
this.updateComponent(transaction, this._currentElement, this._currentElement, this._context, this._context);
updateComponent: function (transaction, prevParentElement, nextParentElement, prevU
this._performComponentUpdate(nextParentElement, nextProps, nextSt
_performComponentUpdate: function (nextElement, nextProps, nextState, nextCont
this._updateRenderedComponent(transaction,
_updateRenderedComponent: function (transaction, context) {
var child = this._instantiateReactComponent(nextRenderedElem
var nextMarkup = ReactReconciler.mountComponent(child, //返回編譯好的vnode(含div含hello world)
this._replaceNodeWithMarkup(oldHostNode, nextMarkup, //是在這里調用_replaceNodeWithMarkup
_replaceNodeWithMarkup: function (oldHostNode, nextMarkup, prevInstance) { //p1是comment，p2是div
ReactComponentEnvironment.replaceNodeWithMarkup(oldHostNode, nextMarkup,
var ReactComponentEnvironment = {
injection: {
injectEnvironment: function (environment) {
ReactComponentEnvironment.replaceNodeWithMarkup = environment.replaceNodeWithMarkup;
ReactComponentEnvironment.processChildrenUpdates = environment.processChildrenUpdates;
//debug看傳入的environment的兩個函數代碼是：
dangerouslyReplaceNodeWithMarkup: function (oldChild, markup) { //p1=cmmment,p2=div
if (typeof markup === 'string') {
var newChild = createNodesFromMarkup(markup, emptyFunction)[0];
oldChild.parentNode.replaceChild(newChild, oldChild);
} else {
DOMLazyTree.replaceChildWithTree(oldChild, markup);
dangerouslyProcessChildrenUpdates: function (parentInst, updates) { //p1=div, p2=div的內容
var node = ReactDOMComponentTree.getNodeFromInstance(parentInst); // node是DOM元素div
DOMChildrenOperations.processUpdates(node, updates);
}
//底層操作網頁元素的方法是：
node.firstChild.nodeValue = text; 或：node.textContent = text;
?
上面流程最底層代碼才是真正把<div>hello world</div>插入網頁替換之前的comment元素，如果之前沒有執行_mountImageintoNode沒有把comment元素插入網頁，comment元素就沒有父節點<div id="app">，就沒法通過comment元素的父節點用<div>hello world</div>替換comment，因為comment沒有在網頁中沒有父節點。如果沒有異步加載，就沒有comment問題，就是把最終編譯結果插入container，之后再更新時就找container.firstchild替換。
更新時也會調用ReactReconciler.mountComponent再調用相應的編譯方法編譯元素節點，更新一個組件就是重新編譯組件，邏輯是符合的，框架都是如此設計的。
從入口開始編譯處理根組件template并且插入網頁生效，根組件template的根元素<provider>有tree結構，遞歸所有子節點，上層子節點是管理組件，最后是connect組件和App組件，最底層Element元素是一個<div>hello world</div>元素節點。
js代碼的目的就是動態構造html代碼把數據插入html代碼再插入網頁，框架為了實現語義化和組件機制還有路由切換以及全局數據費了九牛二虎之力，深入到框架內部龐大復雜的機制里面把幾十上百個函數流程都走一遍，把幾千幾萬行代碼都執行一遍，有一段核心程序是遞歸反復執行，有幾段核心程序是反復調用多次，最后才回到最終的目標，就是把組件的template編譯插入數據再插入網頁，編譯完之后如何轉到這最后一步涉及到transaction機制，設計得非常深奧。
至此還有一個問題就是如何執行到runBatchedUpdates？
react用transaction.perform機制來執行里面的函數方法，先執行wrapper的init方法，再執行函數方法，然后再執行wrapper的close方法，在創建update transaction實例時會構造如下的wrapper和init/close方法：
var NESTED_UPDATES = {
initialize: function () {
this.dirtyComponentsLength = dirtyComponents.length;
},
close: function () {
dirtyComponents.splice(0, this.dirtyComponentsLength);
flushBatchedUpdates(); // 會執行runBatchedUpdates
可以看到當執行完編譯相關函數之后會執行wrapper的close方法，就會執行flushBatchedUpdates方法，這個方法會執行runBatchedUpdates方法（以transaction.perform的形式)，會一直層層調用到底層方法把html插入網頁生效。
?transaction機制本質上就是把編譯函數放在try中執行，把更新函數放在finally中執行，把整個處理流程給分裂成兩個，它不是編譯完就直接調用更新函數，分析源代碼流程邏輯破解這個點就有很高的難度，搞不好就卡在這個點上沒法繼續下去，搞不清程序流程邏輯往下是怎么走的。
其實程序執行一旦有錯是沒法補救的，所以用什么辦法都沒有意義，只是形式上和報錯方面可以更優雅一點而已。
?
下面是一個簡單使用 Transaction 的例子（原文地址https://zhuanlan.zhihu.com/p/20328570）：
var Transaction = require('./Transaction');
// 我們自己定義的 Transaction
var MyTransaction = function() {
// do sth.
};
Object.assign(MyTransaction.prototype, Transaction.Mixin, {
getTransactionWrappers: function() {
return [{
initialize: function() {
console.log('before method perform');
},
close: function() {
console.log('after method perform');
}
}];
};
});
var transaction = new MyTransaction();
var testMethod = function() {
console.log('test');
}
transaction.perform(testMethod);
// before method perform
// test
// after method perform
?
transaction機制其實就是類似angular 2.0使用的zone.js，也有點類似promise的作用，都是對異步過程加強控制，promise已經成為js原生功能。
使用異步過程管理增強功能代碼之后，寫代碼和看代碼就復雜了，要熟悉增強代碼才行，否則看代碼沒法看，增強代碼相當于一個外部插件。
增強代碼都是可有可無的，它們的作用其實很微弱，甚至本質上沒有什么作用，只是改變了編程形式，使編程形式更高級優雅，看似是異步過程同步似的，其實本質上大都還是順序執行代碼的一個順序流，并不是像多線程并發那樣的真正的異步并發過程同步。
對于一般人設計應用程序來說，使用這些復雜的增強功能代價太大，沒有必要，但大公司項目產品使用它們，要學習源碼就躲不開它們。
?
小結一下從根Element開始的處理流程：
Element -> wrapper instance -> instance.mountComponent(compile) -> new instance._currentElement.type()組件實例 -> 組件實例.render()產生Element -> 遞歸子節點
?
元素樹結構：
provider->router->connect->app
每層元素根據類型創建instance，執行其mountComponent，再new 組件實例inst，再執行組件實例inst的render()方法產生一個element，再遞歸。
我們在定義組件時并沒有定義組件構造函數，組件構造函數是根據組件函數定義或類定義以及ReactComponent基類自動構造出來的，只需要用prototype包含一些屬性方法即可，很簡單，這樣在new 組件構造函數()實例化之后含有屬性方法即可，比如render()方法。new實例之后就可以執行實例inst.render()產生組件根元素Element，再根據Element產生wrapper instance含相應的mountComponent編譯方法，再通過reconciler.mountComponent調用instance.mountComponent編譯組件，遞歸子節點子組件。
所以其實最根本的是第一個根元素Element含有一個子節點，再遞歸編譯子節點時，這個子節點又含有一個子節點，這都是框架設計好的元素節點，然后就會遞歸到app組件，
先new App()實例化，再執行inst.render()產生一個根元素，這個根元素就是<div>，這是我們在app組件template寫的根元素。然后就再遞歸編譯處理<div>根元素，它沒有子節點，只有一個文本內容hello world，那么就到此結束。返回到transaction.perform，執行update流程，把/路由組件編譯結果<div>hello world</div>插入到<div id="app">替換之前插入的comment不可見占位元素，此時網頁顯示hello world。等ajax從后臺獲取數據更新store之后，app組件會通過connect組件自動更新，網頁顯示另外一個字符串。
?遞歸編譯router組件時要遞歸兩次，第一次時instance.props含/路由，第二次時instance.含connect組件，再遞歸就是app組件，再遞歸就是div元素，這次是調用domcomponent.mountcomponent編譯方法，如果div里面又有組件節點，則又要調用compositecomponent.mountcomponent遞歸編譯組件。
?
?react用connect連接應用組件和redux，應用組件代碼沒有定義屬性方法，應用組件的完整定義實際上是這樣的：
connect(state,action)(component)
在元素樹/組件樹結構中最上層還有provider/router組件，而且router有兩層，有一層是context，應用組件有兩個，一個是connect，一個是app。
說到connect有一點要注意，那就是要注意connect的render方法：
Connect.prototype.render = function render() {
this.renderedElement = (0, _react.createElement)(WrappedComponent, this.mergedProps);
當store中的屬性變化觸發執行connect組件的render方法時，可以看到，它產生的Element是App組件元素，并且傳遞props，那么遞歸編譯處理就是編譯更新App組件，在new App(props,context)組件實例時傳入props，組件基類ReactComponet構造函數代碼有一句this.props=props就是設置app組件的props，之后組件就具有之前傳遞給connect(props,action)的屬性方法。
所以connect是App的代理組件/接口組件，App組件并沒有定義props屬性，也沒有定義和“注冊”更新方法listener，組件定義代碼只是一部分，要和connect代碼“合并”才是完整的代碼，每個應用組件都要復用connect組件代碼，debug一個組件的代碼也涉及到connect組件代碼，Connect接口組件的作用就是綁定store。
?
關于connect還有一點，Connect組件構造函數代碼是：
Connect(props,context){}
這么寫是有點迷惑的，會誤以為props就是之前傳遞給connect(state,action）的props，其實不是，組件形式上統一這么寫，實際上在new Connect()時，只需傳遞context，里面有store，而props是沒東西的，Connect的屬性方法都是在prototype定義的，沒有
需要在new實例時再傳入的屬性，在new Connect()時傳入的props即使為空結果也一樣，在new App(props,context)實例時才需要傳入props，這個props是Connect的listener被觸發執行獲取props再傳遞給render方法再傳遞到new App(props)的。
?
另外router的render方法也需要注意一下，否則debug看數據根本就看不懂：
render: function render(props) {
return _react2.default.createElement(_RouterContext2.default, props);
}
可以看到router也會創建一個element，props就是路由參數，從根組件開始編譯時路由就是/，context就是要傳遞的router實例，每個應用根組件都需要訪問router實例。
框架的設計原理是基于template模板的，框架組件的template是如何被處理的我們一般不太容易能看到，template首先會被編譯，編譯結果是一個render方法代碼，里面含createElement()方法，層層嵌套，是一個節點樹。再執行render方法代碼則產生一個根元素(vnode)，含層層嵌套的子節點，是js對象嵌套，不是html對象嵌套。之后從根元素開始compile編譯，遞歸子節點，最后把編譯產生的html內容插入網頁生效。所以除了編譯template之外，框架只要設計一個compile(element)遞歸程序就把事情搞定了，只要能處理子節點子組件嵌套即可，react的編譯程序就是mountComponent，搞得比較復雜麻煩。
?
react的模板設計是在應用組件外層套了好幾層組件，頂層是provider，再通過context傳遞store，從根組件template根元素provider開始編譯遞歸直到應用組件的根元素再到最底層的div元素，第一個元素還不是provider，而是toplevelwrapper，router元素有兩層，應用組件套一層connect組件結果產生了兩個組件實例，頭幾次遞歸編譯處理的元素都是react內部設計好的元素，從/路由組件元素開始才遞歸編譯處理應用組件，debug遞歸編譯程序會看到幾個莫名其妙的元素，確實太復雜了。
相比之下vue的入口就是router.start(App)或new Vue(App)從根組件開始查路由表再執行/路由組件以及缺省子路由組件，從template根元素開始編譯用compile遞歸所有子節點包括子組件節點，最后插入網頁生效。在每一個組件代碼里面定義所有的屬性方法，不管是組件本地屬性方法還是綁定到store的屬性方法，非常簡單純粹，寫組件代碼很簡單，debug也方便，維護和查找問題也很容易。
?
再就是provider標簽屬于內部機制，不應該暴露出來，在html模板寫<provider>有點莫名其妙，以演示hello world為例（假定hello world是通過ajax從后臺獲取并保存在store的），react是最麻煩的。
相比之下vue設計簡單高明，vue只有一個<router-view>標簽針對路由切換，其它的功能都無需寫在template上，都隱藏了，由源碼自行解決，router實例自動傳遞到每一個應用組件，每個應用組件如果要使用全局數據只需寫一個vuex:{}配置即可，無需套這套那的套connect什么的，vue用set/get方法簡單地解決了數據響應難題，應用編程無需涉及store/state機制，只需要寫getUserInfo/setUserInfo這樣的方法即可，store/state數據做為vue內置機制而不是外部插件需要連接綁定那么麻煩。
?
react源碼最難的地方在于在多個地方會調用ReactConciler.mountComponent這個方法，這個方法本身會遞歸（子節點）：
var markup = internalInstance.mountComponent(transaction, hostParent, hostContainerInfo, context, parentDebugID);
?return markup;
因此每次一執行時在遞歸編譯哪個子元素？產生的markup是什么？返回到哪個調用位置？是無法想清楚的，太復雜了，因為可以無限遞歸，無數次調用，設計者具有驚人邏輯思維能力，把每一次遞歸執行時的情況都想清楚了。
?
至此本文差不多就結束了，其實源碼中有些細節也還是很深奧不解的，比如
var?tagContent = this._createContentMarkup(transaction, props, context)
這段代碼不知道有何作用？react如何處理類似transclude？
還有transaction機制不太清楚有何作用？queue異步調度好像與vue差不多。
還有一些細節也還沒有完全搞明白。
文中有錯誤之處歡迎指正。
?
轉載于:https://www.cnblogs.com/pzhu1/p/8884807.html
總結
以上是生活随笔為你收集整理的react源代码重点难点分析的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： property classmetho
- 下一篇： 新加坡计划通过区块链促进东盟金融包容性