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等,
vue是把html,css,js組合到一起,用各自的處理方式,vue有單文件組件,可以把html、css、js寫到一個文件中,html提供了模板引擎來處理。
3.類式的組件寫法,還是聲明式的寫法
react是類式的寫法,api很少,
而vue是聲明式的寫法,通過傳入各種options,api和參數都很多。所以react結合typescript更容易一起寫,vue稍微復雜。
vue結合vue-class-component也可以實現類式的寫法,但是還是需要通過decorator來添加聲明,并不純粹。
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點不同:
- 數據是不是可變的
- 通過js操作一切還是各自的處理方式
- 類式的組件寫法還是聲明式的寫法
- 什么功能內置,什么交給社區去做
(其中第3點在vue3.0支持類式寫法之后就可以去掉了)
react整體的思路就是函數式,所以推崇純組件,數據不可變,單向數據流,當然需要雙向的地方也可以做到,比如結合redux-form,而vue是基于可變數據的,支持雙向綁定。react組件的擴展一般是通過高階組件,而vue組件會使用mixin。vue內置了很多功能,而react做的很少,很多都是由社區來完成的,vue追求的是開發的簡單,而react更在乎方式是否正確。