react和vue都是做組件化的,整體的功能都類似,但是他們的設(shè)計(jì)思路是有很多不同的哥蔚。使用react和vue,主要是理解他們的設(shè)計(jì)思路的不同蛛蒙。
1.數(shù)據(jù)是不是可變的
react整體是函數(shù)式的思想糙箍,把組件設(shè)計(jì)成純組件,狀態(tài)和邏輯通過參數(shù)傳入宇驾,所以在react中倍靡,是單向數(shù)據(jù)流,推崇結(jié)合immutable來實(shí)現(xiàn)數(shù)據(jù)不可變课舍。react在setState之后會(huì)重新走渲染的流程,如果shouldComponentUpdate返回的是true他挎,就繼續(xù)渲染筝尾,如果返回了false,就不會(huì)重新渲染办桨,PureComponent就是重寫了shouldComponentUpdate筹淫,然后在里面作了props和state的淺層對(duì)比。
而vue的思想是響應(yīng)式的呢撞,也就是基于是數(shù)據(jù)可變的损姜,通過對(duì)每一個(gè)屬性建立Watcher來監(jiān)聽饰剥,當(dāng)屬性變化的時(shí)候,響應(yīng)式的更新對(duì)應(yīng)的虛擬dom摧阅。
總之汰蓉,react的性能優(yōu)化需要手動(dòng)去做,而vue的性能優(yōu)化是自動(dòng)的棒卷,但是vue的響應(yīng)式機(jī)制也有問題顾孽,就是當(dāng)state特別多的時(shí)候,Watcher也會(huì)很多比规,會(huì)導(dǎo)致卡頓若厚,所以大型應(yīng)用(狀態(tài)特別多的)一般用react,更加可控蜒什。
2.通過js來操作一切测秸,還是用各自的處理方式
react的思路是all in js,通過js來生成html,所以設(shè)計(jì)了jsx咳榜,還有通過js來操作css鳖孤,社區(qū)的styled-component、jss等肃晚,
vue是把html,css仔戈,js組合到一起关串,用各自的處理方式,vue有單文件組件监徘,可以把html晋修、css、js寫到一個(gè)文件中凰盔,html提供了模板引擎來處理墓卦。
3.類式的組件寫法,還是聲明式的寫法
react是類式的寫法户敬,api很少落剪,
而vue是聲明式的寫法,通過傳入各種options尿庐,api和參數(shù)都很多忠怖。所以react結(jié)合typescript更容易一起寫,vue稍微復(fù)雜抄瑟。
vue結(jié)合vue-class-component也可以實(shí)現(xiàn)類式的寫法凡泣,但是還是需要通過decorator來添加聲明,并不純粹。
react可以通過高階組件(Higher Order Components--HOC)來擴(kuò)展鞋拟,而vue需要通過mixins來擴(kuò)展
一個(gè)react高階組件的例子:
vue的mixin的例子:
React剛開始也有mixin的寫法骂维,通過React.createClass的api,不過現(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)置的,寫起來確實(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來優(yōu)化性能,vue不需要通今。
總結(jié)
上面主要梳理了react和vue的4點(diǎn)不同:
- 數(shù)據(jù)是不是可變的
- 通過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ò)展一般是通過高階組件感耙,而vue組件會(huì)使用mixin。vue內(nèi)置了很多功能椰苟,而react做的很少抑月,很多都是由社區(qū)來完成的,vue追求的是開發(fā)的簡(jiǎn)單舆蝴,而react更在乎方式是否正確。