react精髓之一---diff算法

Miyang 發(fā)布于2019-08-19 18:05 / 2259人閱讀

摘要：傳統(tǒng)算法的一大特點就是虛擬的算法，下圖為實現(xiàn)流程圖。如果的子節(jié)點仍有子節(jié)點依舊順次執(zhí)行。我們來觀察下復雜度傳統(tǒng)算法的復雜度為，單純從看，復雜度不到，但實際上。通過制定大膽的策略，將復雜度的問題轉換成復雜度的問題。

從react渲染開始：

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

傳統(tǒng)diff算法

react的一大特點就是虛擬DOM的diff算法，下圖為diff實現(xiàn)流程圖。

現(xiàn)在我們就主要分析下react的diff算法：
react的算法和傳統(tǒng)算法有多不同，下面是我對傳統(tǒng)算法的理解畫的流程圖（歡迎討論）：

　　圖很清楚，其實傳統(tǒng)算法就是對每個節(jié)點一一對比，循環(huán)遍歷所有的子節(jié)點，然后判斷子節(jié)點的更新狀態(tài)，分別為remove、add、change。如果before的子節(jié)點仍有子節(jié)點依舊順次執(zhí)行。
　　我們來觀察下復雜度,傳統(tǒng) diff 算法的復雜度為 O(n^3)，單純從demo看，復雜度不到n3，但實際上。
React 通過制定大膽的策略，將 O(n^3) 復雜度的問題轉換成 O(n) 復雜度的問題。
　　其實算法直接降低這么多，肯定是有多犧牲的，或者說是是指定了特定的策略，定制化的實現(xiàn)了所需算法。react就是如此，他根據(jù)自己的特點，實現(xiàn)了部分代碼的簡化。

上面的特點為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/

云服務器 GPU云服務器 javascript精髓數(shù)據(jù)分析之一基礎java的精髓 diff

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://systransis.cn/yun/79182.html

從零自己編寫一個React框架【中高級前端殺手锏級別技能】

摘要：想要自己實現(xiàn)一個簡易版框架，并不是非常難。為了防止出現(xiàn)這種情況，我們需要改變整體的策略。上面這段話，說的就是版本和架構的區(qū)別。 showImg(https://segmentfault.com/img/bVbwfRh); 想要自己實現(xiàn)一個React簡易版框架，并不是非常難。但是你需要先了解下面這些知識點如果你能閱讀以下的文章，那么會更輕松的閱讀本文章：優(yōu)化你的超大型React應用 ...

hot_pot_Leo 2019-08-30 15:44 評論0 收藏0
從零自己編寫一個React框架【中高級前端殺手锏級別技能】

摘要：想要自己實現(xiàn)一個簡易版框架，并不是非常難。為了防止出現(xiàn)這種情況，我們需要改變整體的策略。上面這段話，說的就是版本和架構的區(qū)別。 showImg(https://segmentfault.com/img/bVbwfRh); 想要自己實現(xiàn)一個React簡易版框架，并不是非常難。但是你需要先了解下面這些知識點如果你能閱讀以下的文章，那么會更輕松的閱讀本文章：優(yōu)化你的超大型React應用 ...

codecook 2019-08-26 10:42 評論0 收藏0
[譯]React 元素 vs React 組件 vs 組件支撐實例

摘要：元素和組件實例都不表示真實元素。我希望這篇文章能夠幫助你理清這些術語參考資料翻譯成支撐實例來自于理解中方法創(chuàng)建組件的聲明式編程和命令式編程的比較對循環(huán)提示增加的研究精髓之一算法本篇為譯文，原文出處：React Elements vs React Components vs Component Backing Instances 許多人可能聽說過 Facebook 的 React 庫，...

gnehc 2019-08-20 16:02 評論0 收藏0
react虛擬dom機制與diff算法

摘要：的一個突出特點是擁有極速地渲染性能。該功能依靠的就是研發(fā)團隊弄出的虛擬機制以及其獨特的算法。在的算法下，在同一位置對比前后節(jié)點只要發(fā)現(xiàn)不同，就會刪除操作前的節(jié)點包括其子節(jié)點，替換為操作后的節(jié)點。 React的一個突出特點是擁有極速地渲染性能。該功能依靠的就是facebook研發(fā)團隊弄出的虛擬dom機制以及其獨特的diff算法。下面簡單解釋一下react虛擬dom機制和diff算法的實現(xiàn)...

jzman 2019-08-21 11:53 評論0 收藏0
React專題：react，redux以及react-redux常見一些面試題

摘要：我們可以為元素添加屬性然后在回調函數(shù)中接受該元素在樹中的句柄，該值會作為回調函數(shù)的第一個參數(shù)返回。使用最常見的用法就是傳入一個對象。單向數(shù)據(jù)流，比較有序，有便于管理，它隨著視圖庫的開發(fā)而被概念化。面試中問框架，經(jīng)常會問到一些原理性的東西，明明一直在用，也知道怎么用，但面試時卻答不上來，也是挺尷尬的，就干脆把react相關的問題查了下資料，再按自己的理解整理了下這些答案。 reac...

darcrand 2019-08-23 13:41 評論0 收藏0