vue react比較

react和vue都是作組件化的，總體的功能都相似，可是他們的設計思路是有不少不一樣的。使用react和vue，主要是理解他們的設計思路的不一樣。

1.數據是否是可變的

react總體是函數式的思想，把組件設計成純組件，狀態和邏輯經過參數傳入，因此在react中，是單向數據流，推崇結合immutable來實現數據不可變。react在setState以後會從新走渲染的流程，若是shouldComponentUpdate返回的是true，就繼續渲染，若是返回了false，就不會從新渲染，PureComponent就是重寫了shouldComponentUpdate，而後在裏面做了props和state的淺層對比。

 

 

 

而vue的思想是響應式的，也就是基因而數據可變的，經過對每個屬性創建Watcher來監聽，當屬性變化的時候，響應式的更新對應的虛擬dom。

 

 

 

 

總之，react的性能優化須要手動去作，而vue的性能優化是自動的，可是vue的響應式機制也有問題，就是當state特別多的時候，Watcher也會不少，會致使卡頓，因此大型應用（狀態特別多的）通常用react，更加可控。

2.經過js來操做一切，仍是用各自的處理方式

react的思路是all in js，經過js來生成html，因此設計了jsx，還有經過js來操做css，社區的styled-component、jss等，

 

 

 

image.png

vue是把html，css，js組合到一塊兒，用各自的處理方式，vue有單文件組件，能夠把html、css、js寫到一個文件中，html提供了模板引擎來處理。

 

 

 

image.png

3.類式的組件寫法，仍是聲明式的寫法

react是類式的寫法，api不多，

 

 

 

image.png

 

而vue是聲明式的寫法，經過傳入各類options，api和參數都不少。因此react結合typescript更容易一塊兒寫，vue稍微複雜。

 

 

 

image.png

vue結合vue-class-component也能夠實現類式的寫法，可是仍是須要經過decorator來添加聲明，並不純粹。

 

image.png

react能夠經過高階組件（Higher Order Components--HOC）來擴展，而vue須要經過mixins來擴展
一個react高階組件的例子：

 

vue的mixin的例子：

React剛開始也有mixin的寫法，經過React.createClass的api，不過如今不多用了。
Vue也不是不能實現高階組件，只是特別麻煩，由於Vue對與組件的option作了各類處理，想實現高階組件就要知道每個option是怎麼處理的，而後正確的設置。具體有多複雜，能夠參考下面的文章。
http://hcysun.me/2018/01/05/%E6%8E%A2%E7%B4%A2Vue%E9%AB%98%E9%98%B6%E7%BB%84%E4%BB%B6/

 

4.什麼功能內置，什麼交給社區去作

react作的事情不多，不少都交給社區去作，vue不少東西都是內置的，寫起來確實方便一些，
好比 redux的combineReducer就對應vuex的modules，
好比reselect就對應vuex的getter和vue組件的computed，
vuex的mutation是直接改變的原始數據，而redux的reducer是返回一個全新的state，因此redux結合immutable來優化性能，vue不須要。

總結

上面主要梳理了react和vue的4點不一樣：

1. 數據是否是可變的
2. 經過js操做一切仍是各自的處理方式
3. 類式的組件寫法仍是聲明式的寫法
4. 什麼功能內置，什麼交給社區去作

（其中第3點在vue3.0支持類式寫法以後就能夠去掉了）

react總體的思路就是函數式，因此推崇純組件，數據不可變，單向數據流，固然須要雙向的地方也能夠作到，好比結合redux-form，而vue是基於可變數據的，支持雙向綁定。react組件的擴展通常是經過高階組件，而vue組件會使用mixin。vue內置了不少功能，而react作的不多，不少都是由社區來完成的，vue追求的是開發的簡單，而react更在意方式是否正確。

 

 

image.png

 

 

 

image.png

 

做者：凌霄光 連接：https://www.jianshu.com/p/b7cd52868e95 來源：簡書 著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。