【轉】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