翻譯自：http://calendar.perfplanet.com/2013/diff/饲漾，感謝Christopher Chedeau！
React是Facebook開發(fā)的一個用于構建用戶界面的JavaScript庫桐臊。它從零開始設計的時候就考慮了性能的問題。在這篇文章中，我將介紹React中的diff算法和渲染過程。這樣你就能夠對自己的應用進行優(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的結果并不是一個實際的DOM節(jié)點氏淑，而是一些輕量級的JavaScript對象勃蜘。我們稱之為虛擬DOM（Virtual DOM）。
React將使用這種表示方法來嘗試找到從一個渲染結果切換到另一個渲染結果的最少步驟假残。例如缭贡，從<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ù)的時間復雜度是O(n^3)「倭耄可以想象到抹竹，這很難處理。React使用一種簡單但強大的啟發(fā)式方式來優(yōu)化到了接近O(n)止潮。
React按層比較兩棵樹窃判。這樣做顯著的降低了問題的復雜度，并且由于Web應用中很少將一個組件在不同層之間移動喇闸，從而不會產(chǎn)生太多負面影響袄琳。Web應用通常只會在子節(jié)點之間橫向移動。
列表
讓我們嘗試這樣一個組件：首先迭代渲染5個組件燃乍，然后在列表中間插入一個新的組件跨蟹。僅根據(jù)這些信息很難在兩個列表之間進行映射。
默認情況下橘沥，React將兩個列表中的組件對應關聯(lián)窗轩。我們也可以為每個組件提供一個key屬性。實際上座咆，通常很容易就可以為子節(jié)點找到一個唯一的Key痢艺。
組件
React應用一般由許多用戶定義的組件構成。這些組件最終會轉換為一個主要由div組成的樹介陶。這些附加信息被diff算法利用了堤舒。React只會匹配類型相同的組件。
如果一個<Header>被<ExampleBlock>替換哺呜，React將刪除Header然后創(chuàng)建一個ExampleBlock舌缤。我們不需要花費寶貴的時間來匹配兩個不一樣的組件。
事件代理
給DOM節(jié)點增加事件監(jiān)聽器是一個既慢又消耗內存的事情某残。React實現(xiàn)了一個叫“事件代理”的技術国撵，并且重新實現(xiàn)了一個W3C兼容的事件系統(tǒng)。因此使得IE 8的事件處理不再是一個問題玻墅，所有的事件都能夠跨瀏覽器使用介牙。
下面讓我解釋一下它的實現(xiàn)。首先將單個事件監(jiān)聽器添加到文檔的根節(jié)點上澳厢。當事件被觸發(fā)后环础，瀏覽器給出目標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)建一個新的事件對象魏保。該對象有一個原始事件對象的引用熬尺，并且能夠進行修改。這樣做會占用更多的內存谓罗，因此React專門為這些對象創(chuàng)建了一個對象池粱哼。當需要一個事件對象時，直接從對象池中重用檩咱。這樣顯著的降低了垃圾回收揭措。
渲染
批處理
當需要調用一個組件的setState時，React將它標記為臟節(jié)點刻蚯。在事件循環(huán)的最后才重新渲染所有的臟節(jié)點绊含。
這種批處理意味著在一個事件循環(huán)，準確地說是一次事件循環(huán)中對DOM進行更新炊汹。這個特性對構建高性能的JavaScript應用一般來說非常難躬充。但在React中，我們默認就可以利用這個特性讨便。
渲染子樹
當調用setState時充甚，組件會重建子節(jié)點的虛擬DOM。如果在根元素上調用setState霸褒，整個React應用都會被重新渲染伴找。所有的組件，包括沒有發(fā)生改變的組件都會調用自己的render方法废菱。這樣做效率低的相當可怕技矮，但在實際應用的時候還是可以很好的工作的。因為我們不需要直接操作DOM殊轴。
首先衰倦，我們討論的是如何顯示用戶界面。因為屏幕空間的限制梳凛，我們通常需要一次性按順序顯示成千上萬個元素耿币。由于整個界面都可以管理梳杏，JavaScript能夠足夠快地處理商業(yè)邏輯韧拒。
其次淹接，在編寫React代碼時，我們不需要在每次發(fā)生改變后就調用根元素的setState方法叛溢。我們只需要接受到改變事件的節(jié)點或者它的一些上層節(jié)點調用該方法塑悼，很少需要上溯到頂部。這意味著變化被局限在用戶交互的地方楷掉。
選擇性渲染子樹
最后厢蒜，我們還能夠組織一些子樹的重新渲染。如果一個組件實現(xiàn)了下面的方法：
boolean shouldComponentUpdate(object nextProps, object nextState)
我們可以基于組件之前的狀態(tài)或者下一個狀態(tài)來決定它是否需要重新渲染烹植。如果實現(xiàn)合理的話斑鸦，這樣做能夠極大的提高程序的性能。
為了使用這個功能草雕，我們需要能夠比較JavaScript對象巷屿。但比較的時候又會引發(fā)許多事情，比如是“深比較”還是“淺比較”墩虹。如果是“深比較”嘱巾，是否應該使用不可變數(shù)據(jù)結構或深拷貝。
需要注意的是诫钓，這個方法會不斷調用旬昭，因此需要確保它的計算盡可能耗時較少。
總結
這種技術能夠使React變得更得快已經(jīng)不是一件新鮮事菌湃。我們也已經(jīng)知道问拘，DOM的處理非常耗時、應該批量進行讀寫操作惧所、事件代理效率更高...
大家現(xiàn)在還經(jīng)常討論它們场梆，因為在正常的JavaScript代碼中很難達到這些目標。React讓這些優(yōu)化默認就會發(fā)生纯路，高性能應用的開發(fā)變得更簡單或油。
React的性能模型非常易于理解：每個setState重新渲染一棵子樹。如果想盡量壓榨性能驰唬，應該盡可能少調用setState或使用shouldComponentUpdate阻止重新渲染大的子樹顶岸。
