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ū)別。
