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

jerryloveemily 發(fā)布于2019-08-22 18:32 / 3224人閱讀

摘要：接著，將返回的元素和之前的進(jìn)行比較的，以驗(yàn)證是否真的需要更新。我們看下代碼，代碼比較簡單好，對(duì)應(yīng)于我們的這個(gè)列子，我們對(duì)于方法的更改并不會(huì)對(duì)方法造成影響。所以我們進(jìn)入下一步，也就是對(duì)于節(jié)點(diǎn)的更新。

接上文，

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

如果組件真的需要更新

在組件剛開始更新過程時(shí)，如果有定義componentWillUpdate方法，則會(huì)進(jìn)行調(diào)用。之后，會(huì)重繪組件并將對(duì)于componentDidUpdate方法的調(diào)用壓入隊(duì)列（React會(huì)延遲這個(gè)方法的調(diào)用，因?yàn)檫@個(gè)方法需要在更新過程的最后被調(diào)用）。
對(duì)于重繪過程，就是調(diào)用組件的render方法，然后根據(jù)返回值更新DOM。具體過程如下，第一步，調(diào)用組件實(shí)例（ExampleApplication）的render方法然后將結(jié)果保存下來（調(diào)用render方法會(huì)返回React元素）。接著，將返回的元素和之前的進(jìn)行比較的，以驗(yàn)證DOM是否真的需要更新。

上面的過程是不是很熟悉？沒錯(cuò)，這個(gè)就是React的看家本領(lǐng)了，虛擬DOM，避免對(duì)于DOM的無用更新，提高了整個(gè)React的性能。看下代碼里對(duì)shouldUpdateReactComponent的注釋：

決定當(dāng)前的實(shí)例是否需要更新，或者銷毀然后用新的實(shí)例替換

大致說來，這個(gè)方法就是用來檢測當(dāng)前元素是否需要被完全替換，換句話說，老的元素應(yīng)該首先被卸載，然后，新元素（render方法的返回）應(yīng)該被掛載并做標(biāo)記，然后接收到的mount方法的返回值，應(yīng)該會(huì)被用于替換當(dāng)前DOM上的元素，或者，如果元素只需要部分更新，那就按需進(jìn)行更新。當(dāng)以下場景發(fā)生時(shí)，通常是需要完全替換元素的：新元素不包含任何東西（在render方法里被移除了）或者元素類型完全不同。比如，原先是div，但是現(xiàn)在變成了其他標(biāo)簽。我們看下代碼，代碼比較簡單：

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

好，對(duì)應(yīng)于我們的ExampleApplication這個(gè)列子，我們對(duì)于state方法的更改并不會(huì)對(duì)render方法造成影響。所以我們進(jìn)入下一步，也就是對(duì)于DOM節(jié)點(diǎn)的更新。
（未完待續(xù)）