亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

React DOM diff 對比Vue DOM diff 區(qū)別詳解

 更新時間:2022年09月01日 14:51:47   作者:隔壁老網(wǎng)  
這篇文章主要為大家介紹了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)文章

最新評論