React DOM diff 和 Vue DOM diff 的區(qū)別

React 是從左向右遍歷對(duì)比，Vue 是雙端交叉對(duì)比。

React 需要維護(hù)三個(gè)變量（我看源碼發(fā)現(xiàn)是五個(gè)變量），Vue 則需要維護(hù)四個(gè)變量。

• Vue 整體效率比 React 更高，舉例說明：假設(shè)有 N 個(gè)子節(jié)點(diǎn)，我們只是把最后子節(jié)點(diǎn)移到第一個(gè)，那么
• React 需要進(jìn)行借助 Map 進(jìn)行 key 搜索找到匹配項(xiàng)，然后復(fù)用節(jié)點(diǎn)
• Vue 會(huì)發(fā)現(xiàn)移動(dòng)，直接復(fù)用節(jié)點(diǎn)

React DOM diff 代碼查看流程

• 運(yùn)行 git clone https://github.com/facebook/react.git
• 運(yùn)行 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 行查看新代碼（實(shí)際上一樣） 發(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)化，因?yàn)槲覀?
// don't have backpointers on fibers. I'm trying to see how far we can get
    不要在fibers上有反向指針。 我想看看我們能走多遠(yuǎn)
// with that model. If it ends up not being worth the tradeoffs, we can
    xxx 如果最終需要為此付出代價(jià)，我們可以
// add it later.
    以后添加它
// Even with a two ended optimization, we'd want to optimize for the case
    即使是雙端優(yōu)化，我們也要針對(duì)這種情況進(jìn)行優(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)我們注意到我們需要的時(shí)候才去找Map
// lots of look ahead. This doesn't handle reversal as well as two ended
    要向前看。 這并不能像處理兩個(gè)端點(diǎn)那樣處理反轉(zhuǎn)
// search but that's unusual. Besides, for the two ended optimization to
    搜索，但這是不尋常的。 此外，對(duì)兩端進(jìn)行了優(yōu)化
// work on Iterables, we'd need to copy the whole set.
    對(duì)于可迭代對(duì)象，我們需要復(fù)制整個(gè)集合。
// In this first iteration, we'll just live with hitting the bad case
    在第一次迭代中，我們將只處理這種糟糕的情況
// (adding everything to a Map) in for every insert/move.
    (添加一切到一個(gè)Map中)在每次插入/移動(dòng)。
// If you change this code, also update reconcileChildrenIterator() which
    如果您更改了這段代碼，還需要更新reconcileChildrenIterator() 方法
// uses the same algorithm.
    使用相同的算法。

總結(jié)

任性，這個(gè)算法不到萬得以的情況不能像Vue一樣使用雙端優(yōu)化，實(shí)在要優(yōu)化的情況下，還要記得改一下別的方法哦，（我補(bǔ)充一句，改了new文件里面的，也要記得改old文件里面的哦）

忽略所有警告和報(bào)錯(cuò)，因?yàn)?React JS 代碼中有不是 JS 的代碼

折疊所有代碼

根據(jù) React 文檔中給出的場(chǎng)景反復(fù)在大腦中運(yùn)行代碼

• 場(chǎng)景0：?jiǎn)蝹€(gè)節(jié)點(diǎn)，會(huì)運(yùn)行到 reconcileSingleElement。接下來看多個(gè)節(jié)點(diǎn)的情況。
• 場(chǎng)景1：沒 key，標(biāo)簽名變了，最終會(huì)走到 createFiberFromElement（存疑）
• 場(chǎng)景2：沒 key，標(biāo)簽名沒變，但是屬性變了，最終走到 updateElement 里的 useFiber
• 場(chǎng)景3：有 key，key 的順序沒變，最終走到 updateElement
• 場(chǎng)景4：有 key，key 的順序變了，updateSlot 返回 null，最終走到 mapRemainingChildren、updateFromMap 和 updateElement(matchedFiber)，整個(gè)過程較長(zhǎng)，效率較低

代碼查看要點(diǎn)（忠告）：

• 聲明不看（用到再看）
• if 先不看（但 if else 要看）
• 函數(shù)調(diào)用必看

以上就是React DOM diff 對(duì)比Vue DOM diff 區(qū)別詳解的詳細(xì)內(nèi)容，更多關(guān)于React DOM diff區(qū)別Vue DOM diff 的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！