首先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 會更合理。