首先React與vue有幾點(diǎn)相同之處

1.都使用了Virtual DOM

2.提供了響應(yīng)式（Reactive）和組件化（Composable）的視圖組件

3.將注意力集中保持在核心庫(kù)缺厉，而將其他功能如路由和全局狀態(tài)管理交給相關(guān)的庫(kù)

性能方面

#React在性能方面使用virtual DOM實(shí)現(xiàn)沒有vue的virtual DOM實(shí)現(xiàn)好,相比較來(lái)說(shuō)vue的virtual DOM的實(shí)現(xiàn)更為輕量些

#在React應(yīng)用中,當(dāng)某個(gè)組件的狀態(tài)發(fā)生變化時(shí),它會(huì)以該組件為根,重新渲染整個(gè)組件子樹

如果避免不必要的子組件的重渲染,你需要在所有可能的地方去使用PureComponent,或者手動(dòng)去實(shí)現(xiàn)shouldComponentUpdate方法,同時(shí)你可能會(huì)需要使用不可變的數(shù)據(jù)結(jié)構(gòu)來(lái) 使你的組件更容易被優(yōu)化

但是如果在使用PureComponent和shouldComponentUpdate時(shí),需要保證該組件的整個(gè)子樹的渲染輸出都是由該組件的props所決定的,如果不符合這個(gè)情況,那么此類優(yōu)化就會(huì)導(dǎo)致難以察覺的渲染結(jié)果不一致,使得React中的組件優(yōu)化伴隨著相當(dāng)?shù)男闹秦?fù)擔(dān)

在vue應(yīng)用中,組件的依賴是在渲染過程中自動(dòng)追蹤的,所以系統(tǒng)能精確知曉哪個(gè)組件確實(shí)被重渲染,可以了解為每個(gè)組件都已經(jīng)自動(dòng)獲得了shouldComponent,并且沒有上述子樹問題限制

Vue 的這個(gè)特點(diǎn)使得開發(fā)者不再需要考慮此類優(yōu)化态辛，從而能夠更好地專注于應(yīng)用本身

開發(fā)時(shí)性能

顯然物遇，在生產(chǎn)環(huán)境中的性能是至關(guān)重要的舞蔽，目前為止我們所具體討論的便是針對(duì)此環(huán)境。但開發(fā)過程中的表現(xiàn)也不容小視。不錯(cuò)的是用 Vue 和 React 開發(fā)大多數(shù)應(yīng)用的速度都是足夠快的。

當(dāng)性能在生產(chǎn)中性能是直接與終端用戶體驗(yàn)相關(guān)的更重要的指標(biāo)時(shí)，表現(xiàn)在開發(fā)中仍然很重要,因?yàn)樗c開發(fā)體驗(yàn)密切相關(guān)醒串。

然而，假如你要開發(fā)一個(gè)對(duì)性能要求比較高的數(shù)據(jù)可視化或者動(dòng)畫的應(yīng)用時(shí)米愿，你需要了解到下面這點(diǎn)：在開發(fā)中厦凤，Vue 每秒最高處理 10 幀，而 React 每秒最高處理不到 1 幀育苟。

這是由于 React 有大量的檢查機(jī)制较鼓，這會(huì)讓它提供許多有用的警告和錯(cuò)誤提示信息。我們同樣認(rèn)為這些是很重要的违柏，但是我們?cè)趯?shí)現(xiàn)這些檢查時(shí)博烂，也更加密切地關(guān)注了性能方面。

HTML & CSS

　　在React中,一切都是JavaScript,不僅僅是HTML可以用JSX來(lái)表達(dá),現(xiàn)在的也越來(lái)越多地將css也納入到j(luò)avascript中來(lái)處理

　　Vue的整體思想就是擁抱經(jīng)典的Web技術(shù),并在其上進(jìn)行擴(kuò)展

　　在 React 中漱竖，所有的組件的渲染功能都依靠 JSX禽篱。JSX 是使用 XML 語(yǔ)法編寫 JavaScript 的一種語(yǔ)法糖

　　JSX說(shuō)是手寫的渲染函數(shù)有下面這些的優(yōu)勢(shì):

　　1.你可以使用完整的編程語(yǔ)言 javascript功能來(lái)構(gòu)建你的視圖頁(yè)面,比如你可以使用臨時(shí)變量 JS自帶的流程控制 以及直接引用當(dāng)前JS作用域中的值等等

　　2.開發(fā)工具對(duì)JSX的支持相比現(xiàn)有可用的其他VUE模版還是比較先進(jìn)的如:linting 類型檢測(cè) 編輯器的自動(dòng)完成

事實(shí)上Vue也提供了渲染函數(shù),甚至支持JSX,然而,我們默認(rèn)推薦還是template模版,任何合乎規(guī)范的HTML都是合法的Vue模版,這也帶來(lái)一些特有的優(yōu)勢(shì):

　　1.對(duì)于很多習(xí)慣了 HTML 的開發(fā)者來(lái)說(shuō)，模板比起 JSX 讀寫起來(lái)更自然馍惹。這里當(dāng)然有主觀偏好的成分躺率，但如果這種區(qū)別會(huì)導(dǎo)致開發(fā)效率的提升，那么它就有客觀的價(jià)值存在万矾。

　　2.基于 HTML 的模板使得將已有的應(yīng)用逐步遷移到 Vue 更為容易

　　3.這也使得設(shè)計(jì)師和新人開發(fā)者更容易理解和參與到項(xiàng)目中

　　4.你甚至可以使用其他模板預(yù)處理器悼吱，比如 Pug 來(lái)書寫 Vue 的模板

我們可以把組件區(qū)分為兩類：一類是偏視圖表現(xiàn)的 (presentational)，一類則是偏邏輯的 (logical)良狈。我們推薦在前者中使用模板后添，在后者中使用 JSX 或渲染函數(shù)。這兩類組件的比例會(huì)根據(jù)應(yīng)用類型的不同有所變化薪丁，但整體來(lái)說(shuō)我們發(fā)現(xiàn)表現(xiàn)類的組件遠(yuǎn)遠(yuǎn)多于邏輯類組件遇西。

CSS的組件作用域

如果不把組件分布在多個(gè)文件上的話,在React中作用域內(nèi)的CSS就會(huì)產(chǎn)生警告,非常簡(jiǎn)單的CSS還可以工作,但是稍微復(fù)雜點(diǎn)的,比如懸停狀態(tài) 媒體查詢 偽類選擇器要么就要通過沉重的依賴來(lái)重做,要么就不能使用

規(guī)模方面

向上擴(kuò)展

Vue和React都提供了強(qiáng)大的路由來(lái)應(yīng)對(duì)大型應(yīng)用,而這些狀態(tài)管理模式甚至也可以非常容易的集成在 Vue 應(yīng)用中。實(shí)際上严嗜，Vue 更進(jìn)一步地采用了這種模式vuex粱檀，更加深入集成 Vue 的狀態(tài)管理解決方案 Vuex 相信能為你帶來(lái)更好的開發(fā)體驗(yàn)。

Vue和React最重要的差異是,Vue的路由庫(kù)和狀態(tài)管理庫(kù)都是由官方來(lái)維護(hù)支持并且與核心庫(kù)同步更新,而React則是選擇把這些問題交給社區(qū)來(lái)維護(hù),因此創(chuàng)建了一個(gè)更分散的生態(tài)系統(tǒng),但相對(duì)的,React的生態(tài)系統(tǒng)相比Vue更加繁榮

最后,Vue提供了Vue-cli腳手架,能讓你非常容易地構(gòu)建項(xiàng)目,包含了Webpack,Browerify,甚至no build system,React在這方面也提供了create-react-app,但是現(xiàn)在還存在一些局限性:

1.它不允許在項(xiàng)目生成時(shí)進(jìn)行任何配置漫玄，而 Vue 支持 Yeoman-like 定制

2.它只提供一個(gè)構(gòu)建單頁(yè)面應(yīng)用的單一模板茄蚯，而 Vue 提供了各種用途的模板

3.它不能用用戶自建的模板構(gòu)建項(xiàng)目，而自建模板對(duì)企業(yè)環(huán)境下預(yù)先建立協(xié)議是特別有用的

而要注意的是這些限制是故意設(shè)計(jì)的,這有它的優(yōu)勢(shì),例如,如果你的項(xiàng)目需求非常簡(jiǎn)單,你就不需要自定義生成過程,你能把它作為一個(gè)依賴來(lái)更新

向下擴(kuò)展

React學(xué)習(xí)曲線陡峭,在你開始學(xué)React前,你需要知道JSX和ES2015,因?yàn)樵S多事例用的是這些語(yǔ)法,你需要學(xué)習(xí)構(gòu)建系統(tǒng)，雖然你在技術(shù)上可以用 Babel 來(lái)實(shí)時(shí)編譯代碼第队，但是這并不推薦用于生產(chǎn)環(huán)境。就像 Vue 向上擴(kuò)展好比 React 一樣刨秆，Vue 向下擴(kuò)展后就類似于 jQuery凳谦。你只要把如下標(biāo)簽放到頁(yè)面就可以運(yùn)行

本地渲染

ReactNative能使你用相同的組件模型編寫有本地渲染能力的APP(ios和Android),能同時(shí)跨多平臺(tái)開發(fā),對(duì)開發(fā)者是非常棒的

在現(xiàn)在，Weex 還在積極發(fā)展衡未，成熟度也不能和 ReactNative 相抗衡尸执。但是，Weex 的發(fā)展是由世界上最大的電子商務(wù)企業(yè)的需求在驅(qū)動(dòng)缓醋，Vue 團(tuán)隊(duì)也會(huì)和 Weex 團(tuán)隊(duì)積極合作確保為開發(fā)者帶來(lái)良好的開發(fā)體驗(yàn)如失。

MobX

Mobx 在 React 社區(qū)很流行，實(shí)際上在 Vue 也采用了幾乎相同的反應(yīng)系統(tǒng)送粱。在有限程度上褪贵，React + Mobx 也可以被認(rèn)為是更繁瑣的 Vue，所以如果你習(xí)慣組合使用它們抗俄，那么選擇 Vue 會(huì)更合理脆丁。