react和vue都是做組件化的,，整體的功能都類似,，但是他們的設(shè)計思路是有很多不同的,。使用react和vue,，主要是理解他們的設(shè)計思路的不同。

1.數(shù)據(jù)是不是可變的

react整體是函數(shù)式的思想,，把組件設(shè)計成純組件,，狀態(tài)和邏輯通過參數(shù)傳入，所以在react中,，是單向數(shù)據(jù)流,，推崇結(jié)合immutable來實現(xiàn)數(shù)據(jù)不可變。react在setState之后會重新走渲染的流程，如果shouldComponentUpdate返回的是true,，就繼續(xù)渲染,，如果返回了false，就不會重新渲染,，PureComponent就是重寫了shouldComponentUpdate,，然后在里面作了props和state的淺層對比。

image.png

而vue的思想是響應(yīng)式的,，也就是基于是數(shù)據(jù)可變的,，通過對每一個屬性建立Watcher來監(jiān)聽，當(dāng)屬性變化的時候,，響應(yīng)式的更新對應(yīng)的虛擬dom,。

image.png

總之，react的性能優(yōu)化需要手動去做,，而vue的性能優(yōu)化是自動的,，但是vue的響應(yīng)式機制也有問題，就是當(dāng)state特別多的時候,，Watcher也會很多,，會導(dǎo)致卡頓，所以大型應(yīng)用（狀態(tài)特別多的）一般用react,，更加可控,。

2.通過js來操作一切，還是用各自的處理方式

react的思路是all in js,，通過js來生成html,，所以設(shè)計了jsx，還有通過js來操作css,，社區(qū)的styled-component,、jss等，

image.png

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

image.png

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

react是類式的寫法,，api很少,，

image.png

而vue是聲明式的寫法，通過傳入各種options,，api和參數(shù)都很多,。所以react結(jié)合typescript更容易一起寫，vue稍微復(fù)雜,。

image.png

image.png

react可以通過高階組件（Higher Order Components--HOC）來擴展,，而vue需要通過mixins來擴展
一個react高階組件的例子：

image.png

image.png

image.png

4.什么功能內(nèi)置,，什么交給社區(qū)去做

react做的事情很少,，很多都交給社區(qū)去做，vue很多東西都是內(nèi)置的,，寫起來確實方便一些,，
比如 redux的combineReducer就對應(yīng)vuex的modules，
比如reselect就對應(yīng)vuex的getter和vue組件的computed,，
vuex的mutation是直接改變的原始數(shù)據(jù),，而redux的reducer是返回一個全新的state，所以redux結(jié)合immutable來優(yōu)化性能,，vue不需要,。

總結(jié)

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

1. 數(shù)據(jù)是不是可變的
2. 通過js操作一切還是各自的處理方式
3. 類式的組件寫法還是聲明式的寫法
4. 什么功能內(nèi)置，什么交給社區(qū)去做

（其中第3點在vue3.0支持類式寫法之后就可以去掉了）

react整體的思路就是函數(shù)式,，所以推崇純組件,，數(shù)據(jù)不可變，單向數(shù)據(jù)流,，當(dāng)然需要雙向的地方也可以做到,，比如結(jié)合redux-form,，而vue是基于可變數(shù)據(jù)的,，支持雙向綁定,。react組件的擴展一般是通過高階組件，而vue組件會使用mixin,。vue內(nèi)置了很多功能,，而react做的很少，很多都是由社區(qū)來完成的,，vue追求的是開發(fā)的簡單,，而react更在乎方式是否正確。

image.png

image.png