說在前面，著重梳理實際更新組件和 dom 部分的代碼，但是關(guān)于異步，transaction，批量合并新狀態(tài)等新細(xì)節(jié)只描述步驟。一來因為這些細(xì)節(jié)在讀源碼的時候只讀了部分，二來如果要把這些都寫出來要寫老長老長。
真實的 setState 的過程：
setState( partialState ) {
// 1. 通過組件對象獲取到渲染對象
var internalInstance = ReactInstanceMap.get(publicInstance);
// 2. 把新的狀態(tài)放在渲染對象的 _pendingStateQueue 里面 internalInstance._pendingStateQueue.push( partialState )
// 3. 查看下是否正在批量更新
// 3.1. 如果正在批量更新，則把當(dāng)前這個組件認(rèn)為是臟組件，把其渲染對象保存到 dirtyComponents 數(shù)組中
// 3.2. 如果可以批量更新，則調(diào)用 ReactDefaultBatchingStrategyTransaction 開啟更新事務(wù)，進(jìn)行真正的 vdom diff。
// |
// v
// internalInstance.updateComponent( partialState )
}
updateComponent 方法的說明：
updateComponent( partialState ) {
// 源碼中 partialState 是從 this._pendingStateQueue 中獲取的，這里簡化了狀態(tài)隊列的東西，假設(shè)直接從外部傳入
var inst = this._instance;
var nextState = Object.assign( {}, inst.state, partialState );
// 獲得組件對象，準(zhǔn)備更新，先調(diào)用生命周期函數(shù)
// 調(diào)用 shouldComponentUpdate 看看是否需要更新組件（這里先忽略 props 和 context的更新）
if ( inst.shouldComponentUpdate(inst.props, nextState, nextContext) ) {
// 更新前調(diào)用 componentWillUpdate
isnt.componentWillUpdate( inst.props, nextState, nextContext );
inst.state = nextState;
// 生成新的 vdom
var nextRenderedElement = inst.render();
// 通過上一次的渲染對象獲取上一次生成的 vdom
var prevComponentInstance = this._renderedComponent; // render 中的根節(jié)點的渲染對象
var prevRenderedElement = prevComponentInstance._currentElement; // 上一次的根節(jié)點的 vdom
// 通過比較新舊 vdom node 來決定是更新 dom node 還是根據(jù)最新的 vdom node 生成一份真實 dom node 替換掉原來的
if ( shouldUpdateReactComponent(prevRenderedElement, nextRenderedElement) ) {
// 更新 dom node
prevComponentInstance.receiveComponent( nextRenderedElement )
} else {
// 生成新的 dom node 替換原來的(以下是簡化版，只為了說明流程)
var oldHostNode = ReactReconciler.getHostNode( prevComponentInstance );
// 根據(jù)新的 vdom 生成新的渲染對象
var child = instantiateReactComponent( nextRenderedElement );
this._renderedComponent = child;
// 生成新的 dom node
var nextMarkup = child.mountComponent();
// 替換原來的 dom node
oldHostNode.empty();
oldHostNode.appendChild( nextMarkup )
}
}
}
接下來看下 shouldUpdateReactComponent 方法：
function shouldUpdateReactComponent(prevElement, nextElement) {
var prevEmpty = prevElement === null || prevElement === false;
var nextEmpty = nextElement === null || nextElement === false;
if (prevEmpty || nextEmpty) {
return prevEmpty === nextEmpty;
}
var prevType = typeof prevElement;
var nextType = typeof nextElement;
if (prevType === 'string' || prevType === 'number') {
return (nextType === 'string' || nextType === 'number');
} else {
return (
nextType === 'object' &&
prevElement.type === nextElement.type &&
prevElement.key === nextElement.key
);
}
}
基本的思路就是比較當(dāng)前 vdom 節(jié)點的類型，如果一致則更新，如果不一致則重新生成一份新的節(jié)點替換掉原來的。好了回到剛剛跟新 dom node這條路 prevComponentInstance.receiveComponent( nextRenderedElement )，即 render 里面根元素的渲染對象的 receiveComponent 方法做了最后的更新 dom 的工作。如果根節(jié)點的渲染對象是組件即 ReactCompositeComponent.receiveComponent，如果根節(jié)點是內(nèi)置對象（html 元素）節(jié)點即 ReactDOMComponent.receiveComponent。ReactCompositeComponent.receiveComponent 最終還是調(diào)用的上面提到的 updateComponent 循環(huán)去生成 render 中的 vdom，這里就先不深究了。最終 html dom node 的更新策略都在 ReactDOMComponent.receiveComponent 中。
class ReactDOMComponent {
// @param {nextRenderedElement} 新的 vdom node
receiveComponent( nextRenderedElement ) {
var prevElement = this._currentElement;
this._currentElement = nextRenderedElement;
var lastProps = prevElement.props;
var nextProps = this._currentElement.props;
var lastChildren = lastProps.children;
var nextChildren = nextProps.children;
/*
更新 props
_updateDOMProperties 方法做了下面兩步
1. 記錄下 lastProps 中有的，nextProps 沒有的，刪除
2. 記錄下 nextProps 中有的，且與 lastProps中不同的屬性，setAttribute 之
*/
this._updateDOMProperties(lastProps, nextProps, transaction);
/*
迭代更新子節(jié)點，源代碼中是 this._updateDOMChildren(lastProps, nextProps, transaction, context);
以下把 _updateDOMChildren 方法展開，對于子節(jié)點類型的判斷源碼比較復(fù)雜，這里只針對string|number和非string|number做一個簡單的流程示例
*/
// 1. 如果子節(jié)點從有到無，則刪除子節(jié)點
if ( lastChildren != null && nextChildren == null ) {
if ( typeof lastChildren === 'string' | 'number' /* 偽代碼 */ ) {
this.updateTextContent('');
} else {
this.updateChildren( null, transaction, context );
}
}
// 2. 如果新的子節(jié)點相對于老的是有變化的
if ( nextChildren != null ) {
if ( typeof lastChildren === 'string' | 'number' && lastChildren !== nextChildren /* 偽代碼 */ ) {
this.updateTextContent('' + nextChildren);
} else if ( lastChildren !== nextChildren ) {
this.updateChildren( nextChildren, transaction, context );
}
}
}
}
this.updateChildren( nextChildren, transaction, context ) 中是真正的 diff 算法，就不以代碼來說了（因為光靠代碼很難說明清楚）
先來看最簡單的情況：
例A：
按節(jié)點順序開始遍歷 nextChildren（遍歷的過程中記錄下需要對節(jié)點做哪些變更，等遍歷完統(tǒng)一執(zhí)行最終的 dom 操作），相同位置如果碰到和 prevChildren 中 tag 一樣的元素認(rèn)為不需要對節(jié)點進(jìn)行刪除，只需要更新節(jié)點的 attr，如果碰到 tag 不一樣，則按照新的 vdom 中的節(jié)點重新生成一個節(jié)點，并把 prevChildren 中相同位置老節(jié)點刪除。按以上兩個狀態(tài)的 vdom tree，那么遍歷完就會記錄下需要做兩步 dom 變更：新增一個 span 節(jié)點插入到第二個位置，刪除原來第二個位置上的 div。
再來看兩個例子：
例B：
遍歷結(jié)果：第二個節(jié)點新增一個span，刪除第二個div和第四個div。
例C：
遍歷結(jié)果：第二個節(jié)點新增一個span，第四個節(jié)點新增一個div，刪除第二個div。
我們看到對于例C來說其實最便利的方法就是把 span 插入到第二的位置上，然后其他div只要做 attr 的更新而不需要再進(jìn)行位置的增刪，如果 attr 都沒有變化，那么后兩個 div 根本不需要變化。但是按例A里面的算法，我們需要進(jìn)行好幾步的 dom 操作。這是為算法減少時間復(fù)雜度，做了妥協(xié)。但是 react 對節(jié)點引入了 key 這個關(guān)鍵屬性幫助優(yōu)化這種情況。假設(shè)我們給所有節(jié)點都添加了唯一的 key 屬性，如下面例D：
例D：
我們在遍歷過程中對所要記錄的東西進(jìn)行優(yōu)化，在某個位置碰到有 key 的節(jié)點我們?nèi)?prevChildren 中找有沒有對應(yīng)的節(jié)點，如果有，則我們會比較當(dāng)前節(jié)點在前后兩個 tree 中相對位置。如果相對位置沒有變化，則不需要做dom的增刪移，而只需要更新。如果位置不一樣則需要記錄把這個節(jié)點從老的位置移動到新的位置（具體算法需要借助前一次dom變化的記錄這里不詳述）。這樣從例C到例D的優(yōu)化減少了 dom 節(jié)點的增刪。
但是 react 的這種算法的優(yōu)化也帶來了一種極端的情況：
例E：
遍歷結(jié)果：3次節(jié)點位置移動：2到1，1到2，0到3。
但是其實這里只需要更新每個節(jié)點的 attr，他們的位置根本不需要做變化。所以如果要給元素指定 key 最好避免元素的位置有太多太大的躍遷變化。
基本上 setState 之后到最終的 dom 變化的過程就是這么結(jié)束了。
后記：
梳理的比較簡單，很多細(xì)節(jié)我沒有精力作一一的總結(jié)，因為我自己看源碼看了好久，代碼中涉及到很多異步，事務(wù)等等干擾項，然后我自己又不想過多的借助現(xiàn)有的資料-_-。當(dāng)我快要把最后一點寫完的時候發(fā)現(xiàn) pure render 專欄的作者陳屹出了一本《深入React技術(shù)?！防锩嬗邢喈?dāng)詳細(xì)的源碼分析，所以我感覺我這篇“白寫”了，貼出這本書就可以了，不過陳屹的這本書是良心之作，必須安利下。
