vue和react都是做組件化的憨琳，針對view層，支持參數(shù)和state旬昭，有虛擬dom機制篙螟，數(shù)據(jù)驅(qū)動視圖。各自配套的全局數(shù)據(jù)存儲 vuex 和 redux也都是flux架構的實現(xiàn)问拘，有action和state遍略，數(shù)據(jù)變化會通知組件慢味。但是vue、vuex和react墅冷、redux還是有很多不同的纯路。
先放兩張vue + vuex 和 react + redux的運行流程圖：
是不是覺得整體架構類似，但是又有一些不同寞忿，下面我們對照上圖梳理一下哪里不同：
組件方面（vue vs react）：
1. 響應式渲染 vs 全局state對比：
vue組件在初始化時會通過Object.defineProperty對每一個data屬性建立對應的Wather驰唬，然后在模板編譯時收集依賴。以后只要修改data的任何一個屬性腔彰，就會觸發(fā)視圖的重新渲染叫编，而且是精確的修改對應的vdom。
react的機制是每次setState的時候霹抛，調(diào)用shouldComponentUpdate搓逾，判斷state或props改變需不需要重新render，如果返回true才會渲染杯拐。默認的實現(xiàn)是返回true霞篡，PureComponent的shouldComponnentUpdate淺層對比了兩次state，考慮到性能端逼，需要寫好shouldComponentUpdate朗兵。
綜上，react的 性能優(yōu)化（shouldComponentUpdate）需要手動去做顶滩，而vue的響應式機制（Watcher）使得它不需要手動去優(yōu)化性能余掖。
2. 模板 vs jsx
react渲染是使用jsx，用js來操作html礁鲁，列表渲染盐欺、條件判斷等都通過js來控制，而vue提供了模板的語法仅醇，支持指令冗美、過濾器等模板功能，簡化了渲染邏輯着憨。在react組件里需要寫大段js才能描述清楚的邏輯墩衙，使用vue的模板可以很簡潔緊湊的表明。
模板和jsx各有優(yōu)缺點甲抖，jsx全部使用js來寫邏輯漆改，更加的靈活，也沒什么學習成本准谚，但是有些渲染邏輯表達會比較啰嗦挫剑。 模板因為是專門針對渲染設計的DSL，所以寫一些渲染邏輯時會特別的簡潔和緊湊柱衔，但學習成本高一些樊破，并且擴展需要通過指令和過濾器的方式愉棱。
數(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等中間件來管理的诵次。
應用中異步請求幾乎是必備的秒裕，vuex設計的時候多加了action handler這一層確實很方便袱蚓。 react的思想是交給社區(qū)去做，通過 一些中間件來做異步管理的優(yōu)點是有很多可選的方案几蜻。redux棧的obserbable和saga確實比vuex棧的action handler強大的多喇潘。
2. getter vs reselect
state的數(shù)據(jù)有時候需要經(jīng)過一些處理和計算才能夠使用，這段計算過程是可以復用的入蛆，react技術棧中使用社區(qū)的reselect可以做到响蓉，而且可以多層select。vuex內(nèi)置了getter哨毁，可以做到復用計算過程和緩存，同時getter也可以組合源武。
區(qū)別就像異步的管理一樣扼褪，一個是內(nèi)置了，一個是交給社區(qū)去做粱栖。交給社區(qū)去做的優(yōu)勢是可以產(chǎn)生很多優(yōu)秀的方案话浇，但是會增加技術棧的學習成本和上手難度。內(nèi)置的優(yōu)勢是技術棧學習成本低闹究、上手快幔崖，但是方案變得不可替換了。
總結(jié)
除了vue和react的 響應式和 全局數(shù)據(jù)對比渣淤，還有 模板和jsx的區(qū)別 是實現(xiàn)思想的區(qū)別以外赏寇，vuex和redux的區(qū)別更多的是內(nèi)置和交給社區(qū)去做的區(qū)別。
redux確實復雜价认，因為要組合一系列東西嗅定。社區(qū)中很多對redux封裝的庫，都是在向vuex的思路靠攏用踩。
vue和react最主要的區(qū)別是設計思想的區(qū)別渠退，以及功能是否內(nèi)置的區(qū)別忙迁。
