【Under-the-hood-ReactJS-Part13】React源碼解讀

接上文，

React流程圖：
https://bogdan-lyashenko.gith...

若是組件真的須要更新

在組件剛開始更新過程時，若是有定義componentWillUpdate方法，則會進行調用。以後，會重繪組件並將對於componentDidUpdate方法的調用壓入隊列（React會延遲這個方法的調用，由於這個方法須要在更新過程的最後被調用）。
對於重繪過程，就是調用組件的render方法，而後根據返回值更新DOM。具體過程以下，第一步，調用組件實例（ExampleApplication）的render方法而後將結果保存下來（調用render方法會返回React元素）。接着，將返回的元素和以前的進行比較的，以驗證DOM是否真的須要更新。

上面的過程是否是很熟悉？沒錯，這個就是React的看家本領了，虛擬DOM，避免對於DOM的無用更新，提升了整個React的性能。看下代碼裏對shouldUpdateReactComponent的註釋：

決定當前的實例是否須要更新，或者銷燬而後用新的實例替換

大體說來，這個方法就是用來檢測當前元素是否須要被徹底替換，換句話說，老的元素應該首先被卸載，而後，新元素（render方法的返回）應該被掛載並作標記，而後接收到的mount方法的返回值，應該會被用於替換當前DOM上的元素，或者，若是元素只須要部分更新，那就按需進行更新。當如下場景發生時，一般是須要徹底替換元素的：新元素不包含任何東西（在render方法裏被移除了）或者元素類型徹底不一樣。好比，原先是div，可是如今變成了其餘標籤。咱們看下代碼，代碼比較簡單：

///src/renderers/shared/shared/shouldUpdateReactComponent.js#25

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
        );
    }
}

好，對應於咱們的ExampleApplication這個列子，咱們對於state方法的更改並不會對render方法形成影響。因此咱們進入下一步，也就是對於DOM節點的更新。
（未完待續）