【轉】react和vue渲染流程對比

react的特點

1. 聲明式設計 −React采用聲明范式，可以輕松描述應用。
2. 高效 −React通過對DOM的模擬（虛擬dom），最大限度地減少與DOM的交互。
3. 靈活 −React可以與已知的庫或框架很好地配合。
4. JSX − JSX 是 JavaScript 語法的擴展。
5. 組件 − 通過 React 構建組件，使得代碼更加容易得到復用，能夠很好的應用在大項目的開發中
6. 單向響應的數據流 − React 實現了單向響應的數據流，從而減少了重復代碼，這也是它為什么比傳統數據綁定更簡單。

vue的特點

MVVM框架、雙向數據綁定原理，數據驅動、組件化、輕量、簡潔、高效、模塊友好

Virtual DoM

虛擬dom是一個什么概念呢

Vue.js(2.x)與React的其中最大一個相似之處，就是他們都使用了一種叫'Virtual DOM'的東西。所謂的Virtual DOM基本上說就是它名字的意思：虛擬DOM。

DOM樹的虛擬表現。它的誕生是基於這么一個概念：改變真實的DOM狀態遠比改變一個JavaScript對象的花銷要大得多。

Virtual DOM是一個映射真實DOM的JavaScript對象，如果需要改變任何元素的狀態，那么是先在Virtual DOM上進行改變，而不是直接改變真實的DOM。當有變化產生時，一個新的Virtual DOM對象會被創建並計算新舊Virtual DOM之間的差別。之后這些差別會應用在真實的DOM上。

react的渲染流程

babel轉換工具地址：http://babeljs.io/repl/

1. react中 我們用jsx來寫組件，它會被babel轉換成純js，然后Preact的h函數會將這段js轉換成DOM樹，最后Preact的Virtual DOM算法會將virtual DOM轉換成真實的DOM樹，來構建我們的應用。

2. 真實的Virtual DOM會比上面的例子更復雜，但它本質上是一個嵌套着數組的原生對象。當新一項被加進去這個JavaScript對象時，一個函數會計算新舊Virtual DOM之間的差異並反應在真實的DOM上。計算差異的算法是高性能框架的秘密所在。

解析流程概覽圖

 

React依賴Virtual DOM,而Vue.js使用的是DOM模板。React采用的Virtual DOM會對渲染出來的結果做臟檢查。

 

vue的渲染流程

Vue宣稱可以更快地計算出Virtual DOM的差異，這是由於它在渲染過程中，會跟蹤每一個組件的依賴關系，不需要重新渲染整個組件樹。

 

 

 

1. Vue的編譯器在編譯模板之后，會把這些模板編譯成一個渲染函數。而函數被調用的時候就會渲染並且返回一個虛擬DOM的樹。這個樹非常輕量，它的職責就是描述當前界面所應處的狀態。

2. 當我們有了這個虛擬的樹之后，再交給一個patch函數，負責把這些虛擬DOM真正施加到真實的DOM上。在這個過程中，Vue有自身的響應式系統來偵測在渲染過程中所依賴到的數據來源。

3. 在渲染過程中，偵測到的數據來源之后，之后就可以精確感知數據源的變動。到時候就可以根據需要重新進行渲染。

4. 當重新進行渲染之后，會生成一個新的樹，將新樹與舊樹進行對比，就可以最終得出應施加到真實DOM上的改動。最后再通過patch函數施加改動。

對比下vue2.x官方文檔

每個組件實例都對應一個 watcher 實例，它會在組件渲染的過程中把“接觸”過的數據屬性記錄為依賴。之后當依賴項的 setter 觸發時，會通知 watcher，從而使它關聯的組件重新渲染。

vue異步更新隊列

可能你還沒有注意到，Vue 在更新 DOM 時是異步執行的。只要偵聽到數據變化，Vue 將開啟一個隊列，並緩沖在同一事件循環中發生的所有數據變更。如果同一個 watcher 被多次觸發，只會被推入到隊列中一次。這種在緩沖時去除重復數據對於避免不必要的計算和 DOM 操作是非常重要的。然后，在下一個的事件循環“tick”中，Vue 刷新隊列並執行實際 (已去重的) 工作。Vue 在內部對異步隊列嘗試使用原生的 Promise.then、MutationObserver 和 setImmediate，如果執行環境不支持，則會采用 setTimeout(fn, 0) 代替。

例如，當你設置 vm.someData = 'new value'，該組件不會立即重新渲染。當刷新隊列時，組件會在下一個事件循環“tick”中更新。多數情況我們不需要關心這個過程，但是如果你想基於更新后的 DOM 狀態來做點什么，這就可能會有些棘手。雖然 Vue.js 通常鼓勵開發人員使用“數據驅動”的方式思考，避免直接接觸 DOM，但是有時我們必須要這么做。為了在數據變化之后等待 Vue 完成更新 DOM，可以在數據變化之后立即使用 Vue.nextTick(callback)。這樣回調函數將在 DOM 更新完成后被調用。

兩者相比

react和vue的相似之處：

1.使用虛擬dom

2.提供了響應式和組件化的視圖組件

3.關注核心庫，伴隨於此，有配套的路由和負責處理全局狀態管理的庫

vue的優勢：

1. API設計上簡單，語法簡單，學習成本低
2. 基於依賴追蹤的觀察系統，並且異步隊列更新
3. 簡單的語法及項目搭建 ，更快的渲染速度和更小的體積
4. 渲染性能

渲染用戶界面的時候，dom的操作成本是最高的，那為了盡可能的減少對dom的操作，Vue和React都利用虛擬DOM來實現這一點，但Vue的Virtual DOM實現（一個陷阱的叉子）的權重要輕得多，因此比React的引入開銷更少。

Vue 和 React 也提供功能性組件，這些組件因為都是沒有聲明，沒有實例化的，因此會花費更少的開銷。當這些都用於關鍵性能的場景時，Vue 將會更快。

5.更新性能

在react中，當一個組件的狀態發生變化時，它將會引起整個組件的子樹都進行重新渲染，從這個組件的根部開始。那為了避免子組件不必要的重新渲染，您需要隨時使用shouldComponentUpdate，並使用不可變的數據結構。 在Vue中，組件的依賴關系在它的渲染期間被自動跟蹤，因此系統准確地知道哪些組件實際上需要重新渲染。這就意味着在更新方面,vue也是快於React

6.開發中

在開發中，Vue 每秒最高處理 10 幀，而 React 每秒最高處理不到 1 幀。這是由於 React 有大量的檢查機制，這會讓它提供許多有用的警告和錯誤提示信息。vue在實現這些檢查時，也更加密切地關注了性能方面。

 

react的優勢

• 更適合大型應用和更好的可測試性
• Web端和移動端原生APP通吃
• 更大的生態系統，更多的支持和好用的工具（搭配的router和redux以及其中間件包含了很多重要的思想）
• 比較適合中大型項目（便於測試和后續調試）
• 是一種在內存中描述dom數狀態的數據結構
• 支持在服務端渲染

原文鏈接：https://www.jianshu.com/p/1960f378b5b4