翻譯自：http://calendar.perfplanet.com/2013/diff/，感謝Christopher Chedeau！

React是Facebook開發(fā)的一個用于構(gòu)建用戶界面的JavaScript庫。它從零開始設(shè)計的時候就考慮了性能的問題。在這篇文章中，我將介紹React中的diff算法和渲染過程。這樣你就能夠?qū)ψ约旱膽?yīng)用進行優(yōu)化。

Diff算法

在開始討論算法的實現(xiàn)細節(jié)之前，我們先簡單了解一下React是如何工作的。

var MyComponent = React.createClass({
    render: function() {
        if(this.props.first) {
            return <div className="first">
                <span>A Span</span>
            </div>;
        }
        else {
            return <div className="second">
                <p>
                    A paragraph
                </p>
            </div>;
        }
    }
});

我們需要描述UI的樣子。上面代碼中render的結(jié)果并不是一個實際的DOM節(jié)點，而是一些輕量級的JavaScript對象。我們稱之為虛擬DOM（Virtual DOM）。

React將使用這種表示方法來嘗試找到從一個渲染結(jié)果切換到另一個渲染結(jié)果的最少步驟。例如，從<MyComponent first={true} />開始，然后替換為<MyComponent first={false} />，最后將它們都刪除。下面是DOM指令：

從0到1

• 創(chuàng)建節(jié)點：<div className="first"><span>A Span</span></div>。

從1到2

• 替換屬性：替換className="first"為className="second"。
• 替換節(jié)點：替換<span>A Span</span>為<p>A Paragraph</p>。

從2到0

• 移除節(jié)點：<div className="second"><p>A Paragraph</p></div>。

按層比較

查找任意兩棵樹之間最少修改數(shù)的時間復(fù)雜度是O(n^3)?？梢韵胂蟮剑@很難處理。React使用一種簡單但強大的啟發(fā)式方式來優(yōu)化到了接近O(n)。

React按層比較兩棵樹。這樣做顯著的降低了問題的復(fù)雜度，并且由于Web應(yīng)用中很少將一個組件在不同層之間移動，從而不會產(chǎn)生太多負面影響。Web應(yīng)用通常只會在子節(jié)點之間橫向移動。

move_node_level_by_level.png

列表

讓我們嘗試這樣一個組件：首先迭代渲染5個組件，然后在列表中間插入一個新的組件。僅根據(jù)這些信息很難在兩個列表之間進行映射。

默認情況下，React將兩個列表中的組件對應(yīng)關(guān)聯(lián)。我們也可以為每個組件提供一個key屬性。實際上，通常很容易就可以為子節(jié)點找到一個唯一的Key。

react_list_key.png

組件

React應(yīng)用一般由許多用戶定義的組件構(gòu)成。這些組件最終會轉(zhuǎn)換為一個主要由div組成的樹。這些附加信息被diff算法利用了。React只會匹配類型相同的組件。

如果一個<Header>被<ExampleBlock>替換，React將刪除Header然后創(chuàng)建一個ExampleBlock。我們不需要花費寶貴的時間來匹配兩個不一樣的組件。

react_component_diff.png

事件代理

給DOM節(jié)點增加事件監(jiān)聽器是一個既慢又消耗內(nèi)存的事情。React實現(xiàn)了一個叫“事件代理”的技術(shù)，并且重新實現(xiàn)了一個W3C兼容的事件系統(tǒng)。因此使得IE 8的事件處理不再是一個問題，所有的事件都能夠跨瀏覽器使用。

下面讓我解釋一下它的實現(xiàn)。首先將單個事件監(jiān)聽器添加到文檔的根節(jié)點上。當(dāng)事件被觸發(fā)后，瀏覽器給出目標(biāo)DOM節(jié)點。為了在整個DOM樹上傳遞事件。React不是在虛擬DOM進行迭代，而是利用每個React組件的唯一ID。我們可以使用一個簡單的字符串來獲取所有父節(jié)點的ID。通過將事件監(jiān)聽器存儲在一個Hash表中，我們發(fā)現(xiàn)比將事件添加到虛擬DOM效率更高。下面是事件在虛擬DOM中分發(fā)的過程。

//dispatchEvent('click', 'a.b.c', event)
clickCaptureListeners['a'](event);
clickCaptureListeners['a.b'](event);
clickCaptureListeners['a.b.c'](event);
clickBubbleListeners['a.b.c'](event);
clickBubbleListeners['a.b'](event);
clickBubbleListeners['a'](event);

瀏覽器為每個事件和監(jiān)聽器創(chuàng)建一個新的事件對象。該對象有一個原始事件對象的引用，并且能夠進行修改。這樣做會占用更多的內(nèi)存，因此React專門為這些對象創(chuàng)建了一個對象池。當(dāng)需要一個事件對象時，直接從對象池中重用。這樣顯著的降低了垃圾回收。

渲染

批處理

當(dāng)需要調(diào)用一個組件的setState時，React將它標(biāo)記為臟節(jié)點。在事件循環(huán)的最后才重新渲染所有的臟節(jié)點。

這種批處理意味著在一個事件循環(huán)，準(zhǔn)確地說是一次事件循環(huán)中對DOM進行更新。這個特性對構(gòu)建高性能的JavaScript應(yīng)用一般來說非常難。但在React中，我們默認就可以利用這個特性。

react_render_event_loop.png

渲染子樹

當(dāng)調(diào)用setState時，組件會重建子節(jié)點的虛擬DOM。如果在根元素上調(diào)用setState，整個React應(yīng)用都會被重新渲染。所有的組件，包括沒有發(fā)生改變的組件都會調(diào)用自己的render方法。這樣做效率低的相當(dāng)可怕，但在實際應(yīng)用的時候還是可以很好的工作的。因為我們不需要直接操作DOM。

首先，我們討論的是如何顯示用戶界面。因為屏幕空間的限制，我們通常需要一次性按順序顯示成千上萬個元素。由于整個界面都可以管理，JavaScript能夠足夠快地處理商業(yè)邏輯。

其次，在編寫React代碼時，我們不需要在每次發(fā)生改變后就調(diào)用根元素的setState方法。我們只需要接受到改變事件的節(jié)點或者它的一些上層節(jié)點調(diào)用該方法，很少需要上溯到頂部。這意味著變化被局限在用戶交互的地方。

react_render_change.png

選擇性渲染子樹

最后，我們還能夠組織一些子樹的重新渲染。如果一個組件實現(xiàn)了下面的方法：

boolean shouldComponentUpdate(object nextProps, object nextState)

我們可以基于組件之前的狀態(tài)或者下一個狀態(tài)來決定它是否需要重新渲染。如果實現(xiàn)合理的話，這樣做能夠極大的提高程序的性能。

為了使用這個功能，我們需要能夠比較JavaScript對象。但比較的時候又會引發(fā)許多事情，比如是“深比較”還是“淺比較”。如果是“深比較”，是否應(yīng)該使用不可變數(shù)據(jù)結(jié)構(gòu)或深拷貝。

需要注意的是，這個方法會不斷調(diào)用，因此需要確保它的計算盡可能耗時較少。

react_render_subtree.png

總結(jié)

這種技術(shù)能夠使React變得更得快已經(jīng)不是一件新鮮事。我們也已經(jīng)知道，DOM的處理非常耗時、應(yīng)該批量進行讀寫操作、事件代理效率更高...

大家現(xiàn)在還經(jīng)常討論它們，因為在正常的JavaScript代碼中很難達到這些目標(biāo)。React讓這些優(yōu)化默認就會發(fā)生，高性能應(yīng)用的開發(fā)變得更簡單。

React的性能模型非常易于理解：每個setState重新渲染一棵子樹。如果想盡量壓榨性能，應(yīng)該盡可能少調(diào)用setState或使用shouldComponentUpdate阻止重新渲染大的子樹。