react跟vue的diff演算法有什麼差別

區別：1、當節點元素類型相同，但className不同時，vue認為是不同類型元素，會刪除重建，而react會認為是同類型節點，只修改節點屬性；2、列表比對，vue採取從兩端到中間的比對方式，而react則採用從左到右依序比對的方式。

本教學操作環境：Windows10系統、react17.0.1版、Dell G3電腦。

react跟vue的diff演算法有什麼差別

在說diff演算法之前先來了解虛擬DOM：

虛擬DOM只保留了真實DOM節點的一些基本屬性，和節點之間的層次關係，它相當於建立在javascript和DOM之間的一層「快取」。

虛擬DOM其實就是用一個物件來描述DOM，透過比較前後兩個物件的差異，最後只把變化的部分重新渲染，提高渲染的效率。

什麼是diff演算法

React需要同時維護兩棵虛擬DOM樹：一棵表示目前的DOM結構，另一棵在React狀態變更將會重新渲染時產生。 React透過比較這兩棵樹的差異，決定是否需要修改DOM結構，以及如何修改。

簡單來說Diff演算法在虛擬DOM上實現，是虛擬DOM的加速器，提升效能的法寶。

原始的diff演算法

最初始的diff演算法其實就是遍歷循環比較,這裡我就不畫圖了,簡單的說一下,很重要,首先肯定要理解啥叫diff演算法,然後才知道vue和react的diff演算法是怎麼做的優化

原始diff演算法就是,兩個虛擬dom樹,進行逐一對比,而且是不分層級的,就是說什麼呢,如果是一個虛擬dom樹,從根節點到以後分支的每一個節點,都要單獨拿出來跟新生成的節點做比較,這就是最原始的diff算法,這個diff算法的時間複雜度是O(n ^3),表面上看是(n ^2),因為單獨一個個的去跟另外的n個相比較,肯定是n ^2次就比較結束了,但是實際上不是的,比較完之後我們還要計算如何在最優的地方放置最佳的節點,所以就是O(n ^3)了,實際上我們從算法層面來看,原始的diff算法從功能上是解決了先對比再處理實際dom的需求,但是實際上我們的流程變得更加的複雜和笨拙

優化的diff演算法

這裡其實要說一下就是vue和react的diff演算法都是優化過的diff演算法,而且有著相同的優化點,就是同級比較,不做跨級比較

就是我們分析可以發現,在實際的web展示中,非同級的節點移動是非常少的,所以我們選擇做同級比較

同級比較的解釋就是:只比較同層的節點，不同層不做比較。不同層的只需要刪除原節點，並且新建插入更新節點

這個是我在網上看到的圖片,我實在是懶的畫,如有侵權請聯絡我刪除,簡單來講就是圖上所說的,樹結構是有層級的,那麼新老樹結構都是可以對比的,對比之後會進行實際的dom操作,也就減少了改變數據產生的整體回流或重繪

Vue和React中diff演算法區別

vue和react的diff演算法，都是忽略跨級比較，只做同級比較。 vue diff時調動patch函數，參數是vnode和oldVnode，分別代表新舊節點。

vue比對節點，當節點元素類型相同，但className不同，認為是不同類型元素，刪除重建，而react會認為是同類型節點，只是修改節點屬性

##vue的列表比對，採用從兩端到中間的比對方式，而react則採用從左到右依序比對的方式。當一個集合，只是把最後一個節點移動到了第一個，react會把前面的節點依序移動，而vue只會把最後一個節點移到第一個。整體上，vue的對比方式更有效率。

推薦學習：《

react影片教學》

以上是react跟vue的diff演算法有什麼差別的詳細內容。更多資訊請關注PHP中文網其他相關文章！