首先React與vue有幾點相同之處
1.都使用了Virtual DOM
2.提供了響應(yīng)式（Reactive）和組件化（Composable）的視圖組件
3.將注意力集中保持在核心庫，而將其他功能如路由和全局狀態(tài)管理交給相關(guān)的庫
性能方面
#React在性能方面使用virtual DOM實現(xiàn)沒有vue的virtual DOM實現(xiàn)好,相比較來說vue的virtual DOM的實現(xiàn)更為輕量些
#在React應(yīng)用中,當(dāng)某個組件的狀態(tài)發(fā)生變化時,它會以該組件為根,重新渲染整個組件子樹
如果避免不必要的子組件的重渲染,你需要在所有可能的地方去使用PureComponent,或者手動去實現(xiàn)shouldComponentUpdate方法,同時你可能會需要使用不可變的數(shù)據(jù)結(jié)構(gòu)來 使你的組件更容易被優(yōu)化
但是如果在使用PureComponent和shouldComponentUpdate時,需要保證該組件的整個子樹的渲染輸出都是由該組件的props所決定的,如果不符合這個情況,那么此類優(yōu)化就會導(dǎo)致難以察覺的渲染結(jié)果不一致,使得React中的組件優(yōu)化伴隨著相當(dāng)?shù)男闹秦?fù)擔(dān)
在vue應(yīng)用中,組件的依賴是在渲染過程中自動追蹤的,所以系統(tǒng)能精確知曉哪個組件確實被重渲染,可以了解為每個組件都已經(jīng)自動獲得了shouldComponent,并且沒有上述子樹問題限制
Vue 的這個特點使得開發(fā)者不再需要考慮此類優(yōu)化，從而能夠更好地專注于應(yīng)用本身
顯然，在生產(chǎn)環(huán)境中的性能是至關(guān)重要的，目前為止我們所具體討論的便是針對此環(huán)境。但開發(fā)過程中的表現(xiàn)也不容小視。不錯的是用 Vue 和 React 開發(fā)大多數(shù)應(yīng)用的速度都是足夠快的。
當(dāng)性能在生產(chǎn)中性能是直接與終端用戶體驗相關(guān)的更重要的指標(biāo)時，表現(xiàn)在開發(fā)中仍然很重要,因為它與開發(fā)體驗密切相關(guān)。
然而，假如你要開發(fā)一個對性能要求比較高的數(shù)據(jù)可視化或者動畫的應(yīng)用時，你需要了解到下面這點：在開發(fā)中，Vue 每秒最高處理 10 幀，而 React 每秒最高處理不到 1 幀。
這是由于 React 有大量的檢查機(jī)制，這會讓它提供許多有用的警告和錯誤提示信息。我們同樣認(rèn)為這些是很重要的，但是我們在實現(xiàn)這些檢查時，也更加密切地關(guān)注了性能方面。
HTML & CSS
在React中,一切都是JavaScript,不僅僅是HTML可以用JSX來表達(dá),現(xiàn)在的也越來越多地將css也納入到j(luò)avascript中來處理
Vue的整體思想就是擁抱經(jīng)典的Web技術(shù),并在其上進(jìn)行擴(kuò)展
在 React 中，所有的組件的渲染功能都依靠 JSX。JSX 是使用 XML 語法編寫 JavaScript 的一種語法糖
JSX說是手寫的渲染函數(shù)有下面這些的優(yōu)勢:
1.你可以使用完整的編程語言 javascript功能來構(gòu)建你的視圖頁面,比如你可以使用臨時變量 JS自帶的流程控制 以及直接引用當(dāng)前JS作用域中的值等等
2.開發(fā)工具對JSX的支持相比現(xiàn)有可用的其他VUE模版還是比較先進(jìn)的如:linting 類型檢測 編輯器的自動完成
事實上Vue也提供了渲染函數(shù),甚至支持JSX,然而,我們默認(rèn)推薦還是template模版,任何合乎規(guī)范的HTML都是合法的Vue模版,這也帶來一些特有的優(yōu)勢:
1.對于很多習(xí)慣了 HTML 的開發(fā)者來說，模板比起 JSX 讀寫起來更自然。這里當(dāng)然有主觀偏好的成分，但如果這種區(qū)別會導(dǎo)致開發(fā)效率的提升，那么它就有客觀的價值存在。
2.基于 HTML 的模板使得將已有的應(yīng)用逐步遷移到 Vue 更為容易
3.這也使得設(shè)計師和新人開發(fā)者更容易理解和參與到項目中
4.你甚至可以使用其他模板預(yù)處理器，比如 Pug 來書寫 Vue 的模板
我們可以把組件區(qū)分為兩類：一類是偏視圖表現(xiàn)的 (presentational)，一類則是偏邏輯的 (logical)。我們推薦在前者中使用模板，在后者中使用 JSX 或渲染函數(shù)。這兩類組件的比例會根據(jù)應(yīng)用類型的不同有所變化，但整體來說我們發(fā)現(xiàn)表現(xiàn)類的組件遠(yuǎn)遠(yuǎn)多于邏輯類組件。
CSS的組件作用域
如果不把組件分布在多個文件上的話,在React中作用域內(nèi)的CSS就會產(chǎn)生警告,非常簡單的CSS還可以工作,但是稍微復(fù)雜點的,比如懸停狀態(tài) 媒體查詢 偽類選擇器要么就要通過沉重的依賴來重做,要么就不能使用
規(guī)模方面
向上擴(kuò)展
Vue和React都提供了強(qiáng)大的路由來應(yīng)對大型應(yīng)用,而這些狀態(tài)管理模式甚至 也可以非常容易的集成在 Vue 應(yīng)用中。實際上，Vue 更進(jìn)一步地采用了這種模式vuex，更加深入集成 Vue 的狀態(tài)管理解決方案 Vuex 相信能為你帶來更好的開發(fā)體驗。
Vue和React最重要的差異是,Vue的路由庫和狀態(tài)管理庫都是由官方來維護(hù)支持并且與核心庫同步更新,而React則是選擇把這些問題交給社區(qū)來維護(hù),因此創(chuàng)建了一個更分散的生態(tài)系統(tǒng),但相對的,React的生態(tài)系統(tǒng)相比Vue更加繁榮
最后,Vue提供了Vue-cli腳手架,能讓你非常容易地構(gòu)建項目,包含了Webpack,Browerify,甚至no build system,React在這方面也提供了create-react-app,但是現(xiàn)在還存在一些局限性:
1.它不允許在項目生成時進(jìn)行任何配置，而 Vue 支持 Yeoman-like 定制
2.它只提供一個構(gòu)建單頁面應(yīng)用的單一模板，而 Vue 提供了各種用途的模板
3.它不能用用戶自建的模板構(gòu)建項目，而自建模板對企業(yè)環(huán)境下預(yù)先建立協(xié)議是特別有用的
而要注意的是這些限制是故意設(shè)計的,這有它的優(yōu)勢,例如,如果你的項目需求非常簡單,你就不需要自定義生成過程,你能把它作為一個依賴來更新
向下擴(kuò)展
React學(xué)習(xí)曲線陡峭,在你開始學(xué)React前,你需要知道JSX和ES2015,因為許多事例用的是這些語法,你需要學(xué)習(xí)構(gòu)建系統(tǒng)，雖然你在技術(shù)上可以用 Babel 來實時編譯代碼，但是這并不推薦用于生產(chǎn)環(huán)境。就像 Vue 向上擴(kuò)展好比 React 一樣，Vue 向下擴(kuò)展后就類似于 jQuery。你只要把如下標(biāo)簽放到頁面就可以運行
本地渲染
ReactNative能使你用相同的組件模型編寫有本地渲染能力的APP(ios和Android),能同時跨多平臺開發(fā),對開發(fā)者是非常棒的
在現(xiàn)在，Weex 還在積極發(fā)展，成熟度也不能和 ReactNative 相抗衡。但是，Weex 的發(fā)展是由世界上最大的電子商務(wù)企業(yè)的需求在驅(qū)動，Vue 團(tuán)隊也會和 Weex 團(tuán)隊積極合作確保為開發(fā)者帶來良好的開發(fā)體驗。
MobX
Mobx 在 React 社區(qū)很流行，實際上在 Vue 也采用了幾乎相同的反應(yīng)系統(tǒng)。在有限程度上，React + Mobx 也可以被認(rèn)為是更繁瑣的 Vue，所以如果你習(xí)慣組合使用它們，那么選擇 Vue 會更合理。
