React DOM diff 對比Vue DOM diff 區(qū)別詳解
React DOM diff 和 Vue DOM diff 的區(qū)別
React 是從左向右遍歷對比,Vue 是雙端交叉對比。
React 需要維護三個變量(我看源碼發(fā)現(xiàn)是五個變量),Vue 則需要維護四個變量。
- Vue 整體效率比 React 更高,舉例說明:假設(shè)有 N 個子節(jié)點,我們只是把最后子節(jié)點移到第一個,那么
- React 需要進行借助 Map 進行 key 搜索找到匹配項,然后復(fù)用節(jié)點
- Vue 會發(fā)現(xiàn)移動,直接復(fù)用節(jié)點
React DOM diff 代碼查看流程
- 運行
git clone https://github.com/facebook/react.git
- 運行
cd react; git switch 17.0.2
- 用 VSCode 或 WebStorm 打開 react 目錄
- 打開
packages/react-reconciler/src/ReactChildFiber.old.js
第 1274 行查看舊版代碼,或打開packages/react-reconciler/src/ReactChildFiber.new.js
第 1267 行查看新代碼(實際上一樣) 發(fā)現(xiàn)react的源碼很多的new和old文件,而且new和old代碼幾乎一模一樣
發(fā)現(xiàn)比較經(jīng)典的注釋 // This algorithm can't optimize by searching from both ends since we 該算法不能通過雙端搜索來優(yōu)化,因為我們 // don't have backpointers on fibers. I'm trying to see how far we can get 不要在fibers上有反向指針。 我想看看我們能走多遠 // with that model. If it ends up not being worth the tradeoffs, we can xxx 如果最終需要為此付出代價,我們可以 // add it later. 以后添加它 // Even with a two ended optimization, we'd want to optimize for the case 即使是雙端優(yōu)化,我們也要針對這種情況進行優(yōu)化 // where there are few changes and brute force the comparison instead of 哪里有一些變化和暴力比較而不是 // going for the Map. It'd like to explore hitting that path first in 去拿Map。 它想要先探索這條路徑 // forward-only mode and only go for the Map once we notice that we need 僅向前模式,只有當(dāng)我們注意到我們需要的時候才去找Map // lots of look ahead. This doesn't handle reversal as well as two ended 要向前看。 這并不能像處理兩個端點那樣處理反轉(zhuǎn) // search but that's unusual. Besides, for the two ended optimization to 搜索,但這是不尋常的。 此外,對兩端進行了優(yōu)化 // work on Iterables, we'd need to copy the whole set. 對于可迭代對象,我們需要復(fù)制整個集合。 // In this first iteration, we'll just live with hitting the bad case 在第一次迭代中,我們將只處理這種糟糕的情況 // (adding everything to a Map) in for every insert/move. (添加一切到一個Map中)在每次插入/移動。 // If you change this code, also update reconcileChildrenIterator() which 如果您更改了這段代碼,還需要更新reconcileChildrenIterator() 方法 // uses the same algorithm. 使用相同的算法。
總結(jié)
任性,這個算法不到萬得以的情況不能像Vue一樣使用雙端優(yōu)化,實在要優(yōu)化的情況下,還要記得改一下別的方法哦,(我補充一句,改了new文件里面的,也要記得改old文件里面的哦)
忽略所有警告和報錯,因為 React JS 代碼中有不是 JS 的代碼
折疊所有代碼
根據(jù) React 文檔中給出的場景反復(fù)在大腦中運行代碼
- 場景0:單個節(jié)點,會運行到 reconcileSingleElement。接下來看多個節(jié)點的情況。
- 場景1:沒 key,標(biāo)簽名變了,最終會走到 createFiberFromElement(存疑)
- 場景2:沒 key,標(biāo)簽名沒變,但是屬性變了,最終走到 updateElement 里的 useFiber
- 場景3:有 key,key 的順序沒變,最終走到 updateElement
- 場景4:有 key,key 的順序變了,updateSlot 返回 null,最終走到 mapRemainingChildren、updateFromMap 和 updateElement(matchedFiber),整個過程較長,效率較低
代碼查看要點(忠告):
- 聲明不看(用到再看)
- if 先不看(但 if else 要看)
- 函數(shù)調(diào)用必看
以上就是React DOM diff 對比Vue DOM diff 區(qū)別詳解的詳細內(nèi)容,更多關(guān)于React DOM diff區(qū)別Vue DOM diff 的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
Vue3實現(xiàn)clipboard復(fù)制的使用示例
在日常開發(fā)中,為用戶提供復(fù)制文本功能的需求比較常見,下面介紹一款vue3可用的插件,可以快速實現(xiàn)這個功能,感興趣的可以了解一下2023-11-11vue路由 遍歷生成復(fù)數(shù)router-link的例子
今天小編就為大家分享一篇vue路由 遍歷生成復(fù)數(shù)router-link的例子,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10vue監(jiān)聽瀏覽器網(wǎng)頁關(guān)閉和網(wǎng)頁刷新事件代碼示例
在前端開發(fā)中我們通常會遇到這樣的需求,用戶離開、刷新頁面前,修改數(shù)據(jù)未進行保存操作,需要提示框提醒用戶,這篇文章主要給大家介紹了關(guān)于vue監(jiān)聽瀏覽器網(wǎng)頁關(guān)閉和網(wǎng)頁刷新事件的相關(guān)資料,需要的朋友可以參考下2023-08-08element上傳組件循環(huán)引用及簡單時間倒計時的實現(xiàn)
這篇文章主要介紹了element上傳組件循環(huán)引用及簡單時間倒計時的實現(xiàn),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-10-10解決vue單頁面多個組件嵌套監(jiān)聽瀏覽器窗口變化問題
這篇文章主要介紹了解決vue單頁面多個組件嵌套監(jiān)聽瀏覽器窗口變化問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07