react和vue都是做組件化的，整體的功能都類似，但是他們的設(shè)計(jì)思路是有很多不同的。使用react和vue，主要是理解他們的設(shè)計(jì)思路的不同。
1.數(shù)據(jù)是不是可變的
react整體是函數(shù)式的思想，把組件設(shè)計(jì)成純組件，狀態(tài)和邏輯通過(guò)參數(shù)傳入，所以在react中，是單向數(shù)據(jù)流，推崇結(jié)合immutable來(lái)實(shí)現(xiàn)數(shù)據(jù)不可變。react在setState之后會(huì)重新走渲染的流程，如果shouldComponentUpdate返回的是true，就繼續(xù)渲染，如果返回了false，就不會(huì)重新渲染，PureComponent就是重寫了shouldComponentUpdate，然后在里面作了props和state的淺層對(duì)比。
image.png
而vue的思想是響應(yīng)式的，也就是基于是數(shù)據(jù)可變的，通過(guò)對(duì)每一個(gè)屬性建立Watcher來(lái)監(jiān)聽(tīng)，當(dāng)屬性變化的時(shí)候，響應(yīng)式的更新對(duì)應(yīng)的虛擬dom。
image.png
總之，react的性能優(yōu)化需要手動(dòng)去做，而vue的性能優(yōu)化是自動(dòng)的，但是vue的響應(yīng)式機(jī)制也有問(wèn)題，就是當(dāng)state特別多的時(shí)候，Watcher也會(huì)很多，會(huì)導(dǎo)致卡頓，所以大型應(yīng)用（狀態(tài)特別多的）一般用react，更加可控。
2.通過(guò)js來(lái)操作一切，還是用各自的處理方式
react的思路是all in js，通過(guò)js來(lái)生成html，所以設(shè)計(jì)了jsx，還有通過(guò)js來(lái)操作css，社區(qū)的styled-component、jss等，
image.png
vue是把html，css，js組合到一起，用各自的處理方式，vue有單文件組件，可以把html、css、js寫到一個(gè)文件中，html提供了模板引擎來(lái)處理。
image.png
3.類式的組件寫法，還是聲明式的寫法
react是類式的寫法，api很少，
image.png
而vue是聲明式的寫法，通過(guò)傳入各種options，api和參數(shù)都很多。所以react結(jié)合typescript更容易一起寫，vue稍微復(fù)雜。
image.png
vue結(jié)合vue-class-component也可以實(shí)現(xiàn)類式的寫法，但是還是需要通過(guò)decorator來(lái)添加聲明，并不純粹。
image.png
react可以通過(guò)高階組件（Higher Order Components--HOC）來(lái)擴(kuò)展，而vue需要通過(guò)mixins來(lái)擴(kuò)展
一個(gè)react高階組件的例子：
image.png
image.png
vue的mixin的例子：
image.png
React剛開(kāi)始也有mixin的寫法，通過(guò)React.createClass的api，不過(guò)現(xiàn)在很少用了。
Vue也不是不能實(shí)現(xiàn)高階組件，只是特別麻煩，因?yàn)閂ue對(duì)與組件的option做了各種處理，想實(shí)現(xiàn)高階組件就要知道每一個(gè)option是怎么處理的，然后正確的設(shè)置。具體有多復(fù)雜，可以參考下面的文章。
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.什么功能內(nèi)置，什么交給社區(qū)去做
react做的事情很少，很多都交給社區(qū)去做，vue很多東西都是內(nèi)置的，寫起來(lái)確實(shí)方便一些，
比如 redux的combineReducer就對(duì)應(yīng)vuex的modules，
比如reselect就對(duì)應(yīng)vuex的getter和vue組件的computed，
vuex的mutation是直接改變的原始數(shù)據(jù)，而redux的reducer是返回一個(gè)全新的state，所以redux結(jié)合immutable來(lái)優(yōu)化性能，vue不需要。
總結(jié)
上面主要梳理了react和vue的4點(diǎn)不同：
數(shù)據(jù)是不是可變的
通過(guò)js操作一切還是各自的處理方式
類式的組件寫法還是聲明式的寫法
什么功能內(nèi)置，什么交給社區(qū)去做
（其中第3點(diǎn)在vue3.0支持類式寫法之后就可以去掉了）
react整體的思路就是函數(shù)式，所以推崇純組件，數(shù)據(jù)不可變，單向數(shù)據(jù)流，當(dāng)然需要雙向的地方也可以做到，比如結(jié)合redux-form，而vue是基于可變數(shù)據(jù)的，支持雙向綁定。react組件的擴(kuò)展一般是通過(guò)高階組件，而vue組件會(huì)使用mixin。vue內(nèi)置了很多功能，而react做的很少，很多都是由社區(qū)來(lái)完成的，vue追求的是開(kāi)發(fā)的簡(jiǎn)單，而react更在乎方式是否正確。
image.png
image.png
