vue和react都是做組件化的,針對view層,支持參數(shù)和state,有虛擬dom機制,數(shù)據(jù)驅(qū)動視圖。各自配套的全局?jǐn)?shù)據(jù)存儲 vuex 和 redux也都是flux架構(gòu)的實現(xiàn),有action和state,數(shù)據(jù)變化會通知組件。但是vue、vuex和react、redux還是有很多不同的。
先放兩張vue + vuex 和 react + redux的運行流程圖:
是不是覺得整體架構(gòu)類似,但是又有一些不同,下面我們對照上圖梳理一下哪里不同:
組件方面(vue
vs react
):
1. 響應(yīng)式渲染
vs 全局state對比
:
vue組件在初始化時會通過Object.defineProperty對每一個data屬性建立對應(yīng)的Wather,然后在模板編譯時收集依賴。以后只要修改data的任何一個屬性,就會觸發(fā)視圖的重新渲染,而且是精確的修改對應(yīng)的vdom。
react的機制是每次setState的時候,調(diào)用shouldComponentUpdate,判斷state或props改變需不需要重新render,如果返回true才會渲染。默認(rèn)的實現(xiàn)是返回true,PureComponent的shouldComponnentUpdate淺層對比了兩次state,考慮到性能,需要寫好shouldComponentUpdate。
綜上,react的 性能優(yōu)化(shouldComponentUpdate)需要手動去做,而vue的響應(yīng)式機制(Watcher)使得它不需要手動去優(yōu)化性能。
2. 模板
vs jsx
react渲染是使用jsx,用js來操作html,列表渲染、條件判斷等都通過js來控制,而vue提供了模板的語法,支持指令、過濾器等模板功能,簡化了渲染邏輯。在react組件里需要寫大段js才能描述清楚的邏輯,使用vue的模板可以很簡潔緊湊的表明。
模板和jsx各有優(yōu)缺點,jsx全部使用js來寫邏輯,更加的靈活,也沒什么學(xué)習(xí)成本,但是有些渲染邏輯表達會比較啰嗦。 模板因為是專門針對渲染設(shè)計的DSL,所以寫一些渲染邏輯時會特別的簡潔和緊湊,但學(xué)習(xí)成本高一些,并且擴展需要通過指令和過濾器的方式。
數(shù)據(jù)存儲方面(vuex
vs redux
):
1. action handler
vs thunk/saga/observable middleware
redux只有reducer一層,action到達reducer之前會經(jīng)過一系列中間件。而vuex比redux多了一層,action到達mutation handler之前,會經(jīng)歷中間件和action handler。
vuex文檔中說,action handler是做一些異步操作的,而redux中并沒有封裝這些,異步操作是通過社區(qū)提供的redux-thunk、redux-saga或者redux-observable等中間件來管理的。
應(yīng)用中異步請求幾乎是必備的,vuex設(shè)計的時候多加了action handler這一層確實很方便。 react的思想是交給社區(qū)去做,通過 一些中間件來做異步管理的優(yōu)點是有很多可選的方案。redux棧的obserbable和saga確實比vuex棧的action handler強大的多。
2. getter
vs reselect
state的數(shù)據(jù)有時候需要經(jīng)過一些處理和計算才能夠使用,這段計算過程是可以復(fù)用的,react技術(shù)棧中使用社區(qū)的reselect可以做到,而且可以多層select。vuex內(nèi)置了getter,可以做到復(fù)用計算過程和緩存,同時getter也可以組合。
區(qū)別就像異步的管理一樣,一個是內(nèi)置了,一個是交給社區(qū)去做。交給社區(qū)去做的優(yōu)勢是可以產(chǎn)生很多優(yōu)秀的方案,但是會增加技術(shù)棧的學(xué)習(xí)成本和上手難度。內(nèi)置的優(yōu)勢是技術(shù)棧學(xué)習(xí)成本低、上手快,但是方案變得不可替換了。
總結(jié)
除了vue和react的 響應(yīng)式
和 全局?jǐn)?shù)據(jù)對比
,還有 模板
和jsx
的區(qū)別 是實現(xiàn)思想的區(qū)別以外,vuex和redux的區(qū)別更多的是內(nèi)置
和交給社區(qū)去做
的區(qū)別。
redux確實復(fù)雜,因為要組合一系列東西。社區(qū)中很多對redux封裝的庫,都是在向vuex的思路靠攏。
vue和react最主要的區(qū)別是設(shè)計思想的區(qū)別,以及功能是否內(nèi)置的區(qū)別。