前言

哈嘍，大家好，我是 Baker ！🎉

對(duì)于前端的 Vue 和 React 相信大家并不陌生，這兩個(gè)庫(kù)有著截然不同的設(shè)計(jì)思想和發(fā)展目標(biāo)，對(duì)于我們上層使用者來(lái)說(shuō)，研究它們的差異不僅讓我們更加深入的去理解這些庫(kù)的設(shè)計(jì)思想，也能幫助我們?cè)陂_(kāi)發(fā)中更有依據(jù)的去選擇合適的框架。

本篇文章就兩者的更新機(jī)制來(lái)淺淡一下它們的區(qū)別，因?yàn)槭菧\淡并且也受限于篇幅，所以這里并不會(huì)就某些技術(shù)細(xì)節(jié)進(jìn)行展開(kāi)，如果大家想要深入去了解兩者技術(shù)的實(shí)現(xiàn)，可以嘗試去讀一下源碼，或者期待一波博主后續(xù)的更新🌹

因?yàn)椴簧婕凹夹g(shù)細(xì)節(jié)，大家放輕松，悠閑自在的觀(guān)看即可。

好啦，讓我們開(kāi)始吧！

Vue 更新機(jī)制

Vue 使用著名的響應(yīng)式系統(tǒng)來(lái)收集依賴(lài)和派發(fā)更新，當(dāng)模板中數(shù)據(jù)發(fā)生變化時(shí)，組件的 render 函數(shù)會(huì)被作為數(shù)據(jù)的依賴(lài)而被觸發(fā)，只不過(guò)這個(gè)觸發(fā)并不是立刻的，因?yàn)槟０逯袝?huì)引用很多數(shù)據(jù)，render 同時(shí)是這些所有數(shù)據(jù)的依賴(lài)項(xiàng)，如果 render 每次都立刻執(zhí)行，則會(huì)造成多次重復(fù)渲染而消耗性能。

實(shí)際上 render 是被 update 調(diào)用的，而 update 又是 Watcher 調(diào)用的，而 Watcher 在收到 Dep 的派發(fā)更新時(shí)會(huì)把自身交給 Scheduler ，由 Scheduler 負(fù)責(zé)對(duì)其去重并通過(guò) nextTick() 將這些 Watcher 包裝成微任務(wù)放入到事件循環(huán)中等待調(diào)用。

render 執(zhí)行輸出的結(jié)果是一顆新的虛擬 DOM 樹(shù)，然后 update 會(huì)通過(guò) patch 函數(shù)將它與舊的虛擬 DOM 樹(shù)進(jìn)行對(duì)比，diff 和真實(shí) DOM 的操作過(guò)程既是在 patch 函數(shù)中進(jìn)行。

所以，其實(shí) Vue 的整個(gè)更新任務(wù)（構(gòu)建虛擬 DOM ，diff，操作真實(shí) DOM）可以算作一個(gè)整體，這個(gè)整體被當(dāng)作微任務(wù)來(lái)處理，這也就是 Vue 異步更新的原理。

最后附上一張 Vue 官方文檔的流程圖：

React 更新機(jī)制

這里以 React16 之后的 Fiber 架構(gòu)為例。

React 沒(méi)有 Vue 的響應(yīng)式系統(tǒng)，它的更新主要是靠用戶(hù)手動(dòng)的調(diào)用副作用函數(shù)（比如 setState 等）來(lái)觸發(fā)（ Vue 則是系統(tǒng)自動(dòng)觸發(fā)）。所有的更新任務(wù)（如調(diào)用 setState ）會(huì)被 render 階段的 Scheduer 進(jìn)行調(diào)度，它會(huì)將多次的 setState 調(diào)用合并為一次更新操作，render 階段可以隨時(shí)被打斷（如遇到高優(yōu)先級(jí)任務(wù)、當(dāng)前事件循環(huán)沒(méi)有足夠的時(shí)間了、發(fā)生了其它錯(cuò)誤等）。

Scheduer 調(diào)度器負(fù)責(zé)對(duì)任務(wù)進(jìn)行調(diào)度，內(nèi)部會(huì)通過(guò)任務(wù)的優(yōu)先級(jí)（會(huì)通過(guò)一系列的優(yōu)先級(jí)設(shè)置任務(wù)的 delay ），以及當(dāng)前事件循環(huán)空閑的時(shí)間等來(lái)判斷當(dāng)前任務(wù)是否可以執(zhí)行，如果可以執(zhí)行則會(huì)通過(guò) MessageChannel 將任務(wù)包裝成一個(gè)宏任務(wù)推入到事件循環(huán)當(dāng)中等待執(zhí)行，在任務(wù)執(zhí)行時(shí)通過(guò) render 階段的 Reconciler 來(lái)進(jìn)行協(xié)調(diào)。

Scheduer 判斷當(dāng)前任務(wù)是否可以執(zhí)行的調(diào)度可以通過(guò)原生的 requestIdleCallback 來(lái)進(jìn)行簡(jiǎn)單模擬，因?yàn)檫@個(gè) Api 就是在瀏覽器空閑時(shí)期被調(diào)用。

Reconciler 通過(guò)遞和歸兩個(gè)階段來(lái)創(chuàng)建新的 Fiber Tree 和進(jìn)行副作用的收集（這個(gè)副作用指的是 DOM 的更新操作）（ diff 發(fā)生在此），至此 render 階段結(jié)束，之后就來(lái)到了 commit 階段，該階段只有一個(gè) Readerer 執(zhí)行，并且是同步執(zhí)行，Readerer 主要就是根據(jù) Fiber Tree 標(biāo)記的副作用來(lái)進(jìn)行真實(shí) DOM 的創(chuàng)建、更新和刪除操作。

區(qū)別

其實(shí)大體上 Vue 和 React 的更新機(jī)制都是構(gòu)建虛擬DOM、diff、操作真實(shí)DOM這三個(gè)主要過(guò)程，它們的主要區(qū)別主要體現(xiàn)在觸發(fā)更新的機(jī)制和一些細(xì)節(jié)上：

• 觸發(fā)更新機(jī)制：Vue 是通過(guò)響應(yīng)式系統(tǒng)自動(dòng)及時(shí)的進(jìn)行觸發(fā)，而 React 則是通過(guò)用戶(hù)更改狀態(tài)的操作然后進(jìn)行一系列調(diào)度來(lái)觸發(fā)更新。

• 任務(wù)的區(qū)別：Vue 會(huì)將任務(wù)包裝成微任務(wù)，而 React 則是將其包裝成宏任務(wù)。

  雖然都是異步任務(wù)，但它們有很大區(qū)別。在事件循環(huán)中，如果有微任務(wù)存在則會(huì)先一直執(zhí)行微任務(wù)，直到把微任務(wù)隊(duì)列清空，然后再執(zhí)行宏任務(wù)，并且在每個(gè)宏任務(wù)執(zhí)行完畢后，會(huì)立即檢查并執(zhí)行所有微任務(wù)，然后再進(jìn)行下一個(gè)宏任務(wù)的執(zhí)行。

  先明確一點(diǎn)：異步任務(wù)執(zhí)行時(shí)是由主線(xiàn)程進(jìn)行執(zhí)行的，所以此時(shí)它們已經(jīng)相當(dāng)于是同步執(zhí)行了（這個(gè)異步實(shí)際指的是異步任務(wù)在任務(wù)隊(duì)列里面等待的時(shí)候不會(huì)影響主線(xiàn)程的執(zhí)行）

  微任務(wù)執(zhí)行時(shí)不會(huì)穿插其它任務(wù)（比如瀏覽器渲染），所以當(dāng)有大量微任務(wù)堆積時(shí)可能就會(huì)阻塞瀏覽器渲染（異步任務(wù)），但執(zhí)行完一個(gè)宏任務(wù)時(shí)如果遇到瀏覽器需要渲染，則不會(huì)繼續(xù)執(zhí)行下一個(gè)宏任務(wù)而是轉(zhuǎn)去進(jìn)行瀏覽器渲染然后開(kāi)啟新的一輪事件循環(huán)。

  • 因?yàn)?React 的 Fiber 架構(gòu)的出現(xiàn)就是為了能夠隨時(shí)打斷，把控制權(quán)交給主線(xiàn)程，所以 React 采用的是宏任務(wù)，而不是會(huì)一股腦 “ 全沖完 ” 的微任務(wù)，這樣可以避免微任務(wù)過(guò)多而導(dǎo)致的任務(wù)堆積和性能問(wèn)題。
  • 也正是因?yàn)?Vue 的理念是追求響應(yīng)性和即時(shí)效果并避免過(guò)多的渲染，所以它采用微任務(wù)，及時(shí)把更新任務(wù)處理完，最后讓瀏覽器渲染一次即可。
  • 其實(shí)現(xiàn)如今，React 和 Vue 都不是完全使用某一種任務(wù)，在一些情況下 React 也會(huì)使用微任務(wù)，Vue 亦是如此，它們的目標(biāo)都是想要結(jié)合自身情況來(lái)創(chuàng)造一個(gè)更優(yōu)秀的框架。

• diff 算法的不同：Vue 采用雙端對(duì)比，而 React 使用的是 Reconciliation 算法。

  Reconciliation 算法是React 整體的更新策略，并不只是簡(jiǎn)單的 diff 算法。簡(jiǎn)單來(lái)說(shuō) React 的 diff 過(guò)程會(huì)對(duì)單節(jié)點(diǎn)和多節(jié)點(diǎn)分別計(jì)算（都是遍歷 Fiber 鏈表進(jìn)行的），多節(jié)點(diǎn)的情況會(huì)分兩輪遍歷，第一輪遍歷會(huì)嘗試逐個(gè)的復(fù)用節(jié)點(diǎn)，第二輪遍歷處理上一輪遍歷中沒(méi)有處理完的節(jié)點(diǎn)。

  React 不使用雙端 diff 的原因：
  
  React 源碼中的原話(huà)：This algorithm can’t optimize by searching from boths ends since we don’t have backpointers on fibers. I’m trying to see how far we can get with that model. If it ends up not being worth the tradeoffs, we can add it later.（這種算法不能通過(guò)從兩端搜索來(lái)優(yōu)化，因?yàn)槲覀冊(cè)?Fiber 對(duì)象上沒(méi)有反向指針。我正試著看看我們能用這個(gè)模型走多遠(yuǎn)，如果這種方式不理想，以后再考慮實(shí)現(xiàn)兩端搜索。）
  并且源碼中還提到，React 認(rèn)為對(duì)于列表反轉(zhuǎn)和需要進(jìn)行雙端搜索的場(chǎng)景是少見(jiàn)的，所以綜合以上情況， React 暫時(shí)還不會(huì)使用雙端 diff。

結(jié)語(yǔ)

還是那句話(huà)，本篇文章只是淺淡，Vue 和 React 的更新機(jī)制非常復(fù)雜，其中涉及的知識(shí)點(diǎn)很多，比如 Vue 的響應(yīng)式原理、Vue 雙端 diff 流程、React Fiber 架構(gòu)、Fiber 雙緩沖、React Reconciler 遞和歸兩階段流程等等。

本文簡(jiǎn)單梳理了一下它們更新機(jī)制的整體流程，希望能基于此來(lái)為大家展開(kāi)一個(gè)清晰的脈絡(luò)，如果在閱讀過(guò)程中發(fā)現(xiàn)了問(wèn)題，歡迎評(píng)論區(qū)留言交流！

如果本篇文章對(duì)你起到了幫助，還請(qǐng)大家不要吝嗇手中的點(diǎn)贊、評(píng)論、收藏和關(guān)注，我們下次再見(jiàn)！

最近忙著秋招，更新頻率雖然降低了，但是我寫(xiě)文章的熱情可是一點(diǎn)沒(méi)減，期待下次好文相見(jiàn)！