vuex - redux - mobx

vuexjavascript

  尤大大曾說過,Vuex 實際上是一個針對 Vue 特化的 Flux,主要是爲了配合 Vue 自己的響應式機制。固然吸收了一些 Redux 的特色,好比單狀態樹(用一個對象就包含了全部的應用層級狀態,至此它便做爲惟一數據源的存在,這也意味着沒一個應用僅僅包含一個store實例,單一的狀態樹可以讓咱們直接的定位任一特定狀態片斷)和便於測試和熱重載的 API,可是也選擇性的放棄了一些在 Vue 的場景下並不契合的特性,好比強制的 immutability(在保證了每一次狀態變化都能追蹤的狀況下強制的 immutability 帶來的收益就頗有限了)、爲了同構而設計得較爲繁瑣的 API、必須依賴第三方庫才能相對高效率地得到狀態樹的局部狀態等等(相比之下 Vuex 直接用 Vue 自己的計算屬性就能夠)因此 Vue + Vuex 會更簡潔,也不須要考慮性能問題,代價就是 Vuex 只能和 Vue 配合。Vue + Redux 也不是不能夠,可是 Redux 做爲一個泛用的實現和 Vue 的契合度確定不如 Vuex。vue

  

  

  在業務中,使用vue的比例是比較高的,說到vue的狀態管理不得不提到vuex,vuex也是基於flux的產品,因此在某種意義上與redux想象,但又有不一樣。和redux使用不可變數據來表示state不一樣,vuex中沒有render來生成全新的state來替換舊的state。Vuex中的state是能夠修改的。這麼作的緣由和vue運行機制有關,vue是基於ES5的getter/setter來實現視圖數據的雙向綁定,所以,vue中的視圖變動能夠經過setter通知到視圖中對應的指令來實現視圖更新。java

  Mutationreact

    Vuex中的state能夠修改,不過修改state的方式不是經過actions,而是經過mutations,Vuex 中的 mutation 很是相似於事件:每一個 mutation 都有一個字符串的 事件類型 (type) 和 一個 回調函數 (handler)。這個回調函數就是咱們實際進行狀態更改的地方,而且它會接受 state 做爲第一個參數:vuex

     

    不能直接調用mutation handler,須要以相應的type調用store.commit方法編程

    

 

  Actionredux

    1).action能夠當作是鏈接視圖與state的橋樑,它會被視圖調用,並由它來調用 mutation handler,向 mutation 傳入 payload。異步

    

    

    2).Action與mutation不一樣在於ide

           Action提交的是mutation,而不是直接變動狀態,函數式編程

           Action中能夠包含任何的異步操做

      Action經過dispatch觸發

      

    3).在組件中使用 this.$store.dispatch('xxx') 分發 action,或者使用 mapActions 輔助函數將組件的 methods 映射爲 store.dispatch 調用(須要先在根節點注入 store

      

Mobx and  Redux

  前景:當咱們使用react開發文本應用時,在react組件內能夠經過this.setState()和this.state處理或訪問組件內狀態,可是隨着隨着項目的增大,狀態變得複雜,一般考慮組件之間的通訊問題:某個狀態須要在多個組件共享、某組件內交互須要其餘組件狀態更新,對此,react組件開發實踐推薦將公用組件狀態提高。可是,當項目愈加複雜時,咱們發現僅僅是提高狀態已經沒法適應如此複雜的狀態管理,程序狀態變得比較難同步操做,這意味着咱們須要更好的狀態管理方式,因而引入了狀態管理庫,如redux、mobx、alt(基於flux使用javascript應用來管理數據的類庫,簡化了flux的store、actions、dispatcher)

  Mobx

    

  redux

    

 

 

  相同點:

    a)      統一維護管理應用狀態

    b)     某一狀態只有一個可信數據來源-store 狀態容器

    c)      操做更新狀態方式統一,而且可控(一般以action方式提供更新狀態的途徑)

    d)     將react組件從業務上分爲容器組件和展現型組件(視圖)

   不一樣點:

    1.   函數式和麪向對象

      Redux 更多的是遵循函數式編程思想,而Mobx更多的是從面向對象角度考慮問題

      Redux提倡函數式代碼,如reducer就是一個純函數.純函數接受輸入,而後輸出結果,除此以外不會有任何影響,也包括不會影響接受的參數

      Mobx更多偏向於面向對象編程和響應式編程,一般將狀態包裝成可觀察對象(observable),因而咱們就可使用可觀察對象的全部能力,一旦全部狀態對象變動,就能自動得到更新

 

              2.   單一和多個store

      Store是應用管理數據的地方,在Redux中,咱們老是將全部共享的數據集中在一個大的store中,而Mobx則一般按模塊將應用狀態劃分,在多個獨立的store中管理

 

              3.   Javascript對象和可觀查對象

                     Redux以javascript原生對象形式存儲數據,而Mobx使用可觀察對象

                     Redux須要手動追蹤全部狀態對象的變動,

                     Mobx中能夠監視可觀察對象,當其變動時自動觸發監聽

 

              4. 不可變(immutable)和可變(mutable)

      Redux狀態一般是不可變的,咱們不能直接操做狀態對象,而是在原來狀態基礎上返回一個新的狀態對象,這樣就能方便應用上一狀態,而Mobx中直接使用新值更新狀態對象  

 

      5.   mobx-react 和 react-redux

       使用react和redux鏈接時,須要使用react-redux提供的provider和connect

         1)、Provider 負責將store注入React應用中

           

         2)、Connect 負責將store state注入容器組件,並選擇特定的狀態爲容器組件props傳遞

           

          對於Mobx而言一樣須要兩個步驟:

         1. Provider 利用mobx-react提供的provider將全部的組件注入

           

         2.   使用inject將特定的store注入組件,store能夠傳遞狀態或action;

            而後使用observer保證組件能響應store中的客觀查對象observable變動,即store更新,組件視圖響應式更新

            

相關文章
相關標籤/搜索