https://www.jianshu.com/p/b7cd52868e95
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更在乎方式是否正確。
作者：凌霄光
鏈接：https://www.jianshu.com/p/b7cd52868e95
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。