從2張運行流程圖看vue和react區(qū)別

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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • Vue也已經(jīng)升級到2.0版本了,到現(xiàn)在為止(2016/11/19)比較流行的MVVM框架有AngularJS(也有...
    彬_仔閱讀 27,249評論 12 114
  • 用了一年半的react系,由于新公司項目都是vue系的,所以開始學(xué)習(xí)vue相關(guān)框架。早就聽說vue是angular...
    Coding_Life閱讀 7,957評論 2 10
  • Foreword: 首先那要說明下,以下是我看到的一篇文章,但是原文是英文的,我只是做一個搬運工把他搬過來~主要也...
    Howie126313閱讀 10,868評論 4 41
  • 今天普通話考試成績出來了,只比上次的分?jǐn)?shù)多0.7分,也就是說,依舊是二乙。這是我第二次考普通話了,而我的目標(biāo),是二...
    三毛的撒哈拉閱讀 1,097評論 5 1
  • 1.藏在塔羅里的占卜符碼 買了覺得虧,書薄字很大不說,跟符碼也沒什么大關(guān)系。硬要給每張牌都分什么元素我也很不贊同。...
    _ElsaLee_閱讀 618評論 0 0