前端三大框架中Vue與React區別

首先React與vue有幾點相同之處

1.都使用了Virtual DOM

2.提供了響應式（Reactive）和組件化（Composable）的視圖組件

3.將注意力集中保持在覈心庫，而將其餘功能如路由和全局狀態管理交給相關的庫

性能方面

#React在性能方面使用virtual DOM實現沒有vue的virtual DOM實現好,相比較來講vue的virtual DOM的實現更爲輕量些

#在React應用中,當某個組件的狀態發生變化時,它會以該組件爲根,從新渲染整個組件子樹

若是避免沒必要要的子組件的重渲染,你須要在全部可能的地方去使用PureComponent,或者手動去實現shouldComponentUpdate方法,同時你可能會須要使用不可變的數據結構來 使你的組件更容易被優化

可是若是在使用PureComponent和shouldComponentUpdate時,須要保證該組件的整個子樹的渲染輸出都是由該組件的props所決定的,若是不符合這個狀況,那麼此類優化就會致使難以察覺的渲染結果不一致,使得React中的組件優化伴隨着至關的心智負擔

在vue應用中,組件的依賴是在渲染過程當中自動追蹤的,因此係統能精確知曉哪一個組件確實被重渲染,能夠了解爲每一個組件都已經自動得到了shouldComponent,而且沒有上述子樹問題限制

Vue 的這個特色使得開發者再也不須要考慮此類優化，從而可以更好地專一於應用自己

開發時性能

顯然，在生產環境中的性能是相當重要的，目前爲止咱們所具體討論的即是針對此環境。但開發過程當中的表現也不容小視。不錯的是用 Vue 和 React 開發大多數應用的速度都是足夠快的。

當性能在生產中性能是直接與終端用戶體驗相關的更重要的指標時，表如今開發中仍然很重要,由於它與開發體驗密切相關。

然而，假如你要開發一個對性能要求比較高的數據可視化或者動畫的應用時，你須要瞭解到下面這點：在開發中，Vue 每秒最高處理 10 幀，而 React 每秒最高處理不到 1 幀。

這是因爲 React 有大量的檢查機制，這會讓它提供許多有用的警告和錯誤提示信息。咱們一樣認爲這些是很重要的，可是咱們在實現這些檢查時，也更加密切地關注了性能方面。

HTML & CSS

　　在React中,一切都是JavaScript,不只僅是HTML能夠用JSX來表達,如今的也愈來愈多地將css也歸入到javascript中來處理

　　Vue的總體思想就是擁抱經典的Web技術,並在其上進行擴展

　　在 React 中，全部的組件的渲染功能都依靠 JSX。JSX 是使用 XML 語法編寫 JavaScript 的一種語法糖

　　JSX說是手寫的渲染函數有下面這些的優點:

　　1.你可使用完整的編程語言 javascript功能來構建你的視圖頁面,好比你可使用臨時變量 JS自帶的流程控制 以及直接引用當前JS做用域中的值等等

　　2.開發工具對JSX的支持相比現有可用的其餘VUE模版仍是比較先進的如:linting 類型檢測 編輯器的自動完成

事實上Vue也提供了渲染函數,甚至支持JSX,然而,咱們默認推薦仍是template模版,任何合乎規範的HTML都是合法的Vue模版,這也帶來一些特有的優點:

　　1.對於不少習慣了 HTML 的開發者來講，模板比起 JSX 讀寫起來更天然。這裏固然有主觀偏好的成分，但若是這種區別會致使開發效率的提高，那麼它就有客觀的價值存在。

　　2.基於 HTML 的模板使得將已有的應用逐步遷移到 Vue 更爲容易

　　3.這也使得設計師和新人開發者更容易理解和參與到項目中

　　4.你甚至可使用其餘模板預處理器，好比 Pug 來書寫 Vue 的模板

咱們能夠把組件區分爲兩類：一類是偏視圖表現的 (presentational)，一類則是偏邏輯的 (logical)。咱們推薦在前者中使用模板，在後者中使用 JSX 或渲染函數。這兩類組件的比例會根據應用類型的不一樣有所變化，但總體來講咱們發現表現類的組件遠遠多於邏輯類組件。

CSS的組件做用域

若是不把組件分佈在多個文件上的話,在React中做用域內的CSS就會產生警告,很是簡單的CSS還能夠工做,可是稍微複雜點的,好比懸停狀態 媒體查詢 僞類選擇器要麼就要經過沉重的依賴來重作,要麼就不能使用

規模方面

向上擴展

Vue和React都提供了強大的路由來應對大型應用,而這些狀態管理模式甚至 也能夠很是容易的集成在 Vue 應用中。實際上，Vue 更進一步地採用了這種模式vuex，更加深刻集成 Vue 的狀態管理解決方案 Vuex 相信能爲你帶來更好的開發體驗。

Vue和React最重要的差別是,Vue的路由庫和狀態管理庫都是由官方來維護支持而且與核心庫同步更新,而React則是選擇把這些問題交給社區來維護,所以建立了一個更分散的生態系統,但相對的,React的生態系統相比Vue更加繁榮

最後,Vue提供了Vue-cli腳手架,能讓你很是容易地構建項目,包含了Webpack,Browerify,甚至no build system,React在這方面也提供了create-react-app,可是如今還存在一些侷限性:

1.它不容許在項目生成時進行任何配置，而 Vue 支持 Yeoman-like 定製

2.它只提供一個構建單頁面應用的單一模板，而 Vue 提供了各類用途的模板

3.它不能用用戶自建的模板構建項目，而自建模板對企業環境下預先創建協議是特別有用的

而要注意的是這些限制是故意設計的,這有它的優點,例如,若是你的項目需求很是簡單,你就不須要自定義生成過程,你能把它做爲一個依賴來更新

向下擴展

React學習曲線陡峭,在你開始學React前,你須要知道JSX和ES2015,由於許多事例用的是這些語法,你須要學習構建系統，雖然你在技術上能夠用 Babel 來實時編譯代碼，可是這並不推薦用於生產環境。就像 Vue 向上擴展比如 React 同樣，Vue 向下擴展後就相似於 jQuery。你只要把以下標籤放到頁面就能夠運行

本地渲染

ReactNative能使你用相同的組件模型編寫有本地渲染能力的APP(ios和Android),能同時跨多平臺開發,對開發者是很是棒的

在如今，Weex 還在積極發展，成熟度也不能和 ReactNative 相抗衡。可是，Weex 的發展是由世界上最大的電子商務企業的需求在驅動，Vue 團隊也會和 Weex 團隊積極合做確保爲開發者帶來良好的開發體驗。

MobX

Mobx 在 React 社區很流行，實際上在 Vue 也採用了幾乎相同的反應系統。在有限程度上，React + Mobx 也能夠被認爲是更繁瑣的 Vue，因此若是你習慣組合使用它們，那麼選擇 Vue 會更合理。