react精髓之一---diff算法

從react渲染開始：

　　在說react虛擬dom以前咱們先來看看react渲染過程，下面連接是根據源碼渲染過程寫的簡寫版。
http://1.sharemandy.sinaapp.c... 有js基礎的比較好理解，也寫了註釋，再也不詳細展開。瞭解了初始化渲染後，再來看如何對比渲染。

傳統diff算法

react的一大特色就是虛擬DOM的diff算法，下圖爲diff實現流程圖。

如今咱們就主要分析下react的diff算法：
react的算法和傳統算法有多不一樣，下面是我對傳統算法的理解畫的流程圖（歡迎討論）：

　　圖很清楚，其實傳統算法就是對每一個節點一一對比，循環遍歷全部的子節點，而後判斷子節點的更新狀態，分別爲remove、add、change。若是before的子節點仍有子節點依舊順次執行。
　　咱們來觀察下複雜度,傳統 diff 算法的複雜度爲 O(n^3)，單純從demo看，複雜度不到n3，但實際上。
React 經過制定大膽的策略，將 O(n^3) 複雜度的問題轉換成 O(n) 複雜度的問題。
　　其實算法直接下降這麼多，確定是有多犧牲的，或者說是是指定了特定的策略，定製化的實現了所需算法。react就是如此，他根據本身的特色，實現了部分代碼的簡化。

上面的特色爲react的核心，其實react的核心代碼並很少，因此不少人都深究過，不少文章都有詳細解釋，在下面的好文章收錄中都有提到，這裏再也不贅述，只作總結。

下篇咱們就會講講diff算法的詳細流程圖

好文章收錄：
react算法源碼地址：https://github.com/facebook/r...
論文算法詳解：http://grfia.dlsi.ua.es/ml/al...
react源碼剖析（這篇文章對圖中移位算法有詳細解釋）：http://zhuanlan.zhihu.com/p/2...
源碼分析：http://purplebamboo.github.io/