Web界面由DOM樹來構成,當其中某一部分發生變化時,其實就是對應的某個DOM節點發生了變化。在React中,構建UI界面的思路是由當前狀態決定界面。前后兩個狀態就對應兩套界面,然后由React來比較兩個界面的區別,這就需要對DOM樹進行Diff算法分析。
即給定任意兩棵樹,找到最少的轉換步驟。但是標准的的Diff算法復雜度需要O(n^3),這顯然無法滿足性能要求。要達到每次界面都可以整體刷新界面的目的,勢必需要對算法進行優化。這看上去非常有難度,然而Facebook工程師卻做到了,他們結合Web界面的特點做出了兩個簡單的假設,使得Diff算法復雜度直接降低到O(n)。
當一個節點從div變成span時,簡單的直接刪除div節點,並插入一個新的span節點。這符合我們對真實DOM操作的理解。需要注意的是,刪除節點意味着徹底銷毀該節點,而不是再后續的比較中再去看是否有另外一個節點等同於該刪除的節點。如果該刪除的節點之下有子節點,那么這些子節點也會被完全刪除,它們也不會用於后面的比較。這也是算法復雜能夠降低到O(n)的原因。
React的DOM Diff算法實際上只會對樹進行逐層比較。
http://www.infoq.com/cn/articles/react-dom-diff?from=timeline&isappinstalled=0