redux 和 mobX對比

feng-fu發表於2018-01-16
Redux

  • 以下內容會嚴格遵循下面三個觀點

    • 這部分的每一個小塊都是為了吹二者之一
    • 要怎麼黑另外一個才能更好的達到吹的效果
    • 要吹得有理有據，黑得不帶痕跡

  • 為什麼這兩個庫可以被用來對比

    1. 目的一致

    都是狀態管理庫，用來管理應用的內部狀態

    1. 受眾大體一致

    一般都會被用到react中，雖然說這並不是必須的，你當然也可以用到vue或者angular裡，但是，大多數情況下，都不會這麼做

    1. 可相互替代

    在專案之初，你可以選擇二者之一來滿足你的專案需求，但是到某一天你突然覺得另一個更和你氣味相投，你完全可以花點時間遷移過去，你會發現，它似乎也能滿足你的那些需求

  1. 學習難度對比:

    • mobX的學習中，你可以聽信關於30分鐘快速入門的神話，這畢竟不是對一個語言而言的《7天從入門到精通》系列，因為它真的很簡單，並且在這三十分鐘過去之後，你唯一需要花的時間就是偶爾翻翻文件就可以自如的使用它了。
    • redux的入門學習也沒那麼難，即使有些概念顯得比較抽象，你最多需要多花上半個小時就可以掌握它們了，但是當你真的去使用的時候，你會發現這一切原來並非想象的那麼簡單，你不得不花更多的時間來學習更多：

    當你需要非同步的時候，你不得不考慮redux-thunk，你怎麼可能不需要非同步 想用Promise，沒問題，先看看redux-promise-middleware怎麼樣 想搞個日誌之類的東西，redux-logger已經準備好了 當你需要使用state中的兩個值來計算出一個值的時候，你如果稍有程式碼潔癖，你肯定不願意這樣做，這時候，你需要的東西叫做Reselect ...

    第一波黑的不錯，你有沒有望而卻步

  2. 工作量對比（以下程式碼直接在nodejs環境下測試）:

    • 一般來講，這裡應該用一個couter之類的示例來做
  const { createStore } = require('redux')
  const ADD = 'ADD'
  const initState = {count: 0}
  // action
  function counter(state = initState, action) {
    switch(action.type) {
      case ADD:
        return {...state, count: state.count + action.payload.count}
      default:
        return state
    }
  }
  // reducer
  const AddOne = () => ({type: ADD, payload: {count:1}})
  // store
  const store = createStore(counter)
  store.subscribe(() => console.log(store.getState()))
  setInterval(() => store.dispatch(AddOne()), 1000)
複製程式碼

不算註釋，大約15行左右，那麼，mobx想要具備壓倒性的優勢，應該極力控制自己的大小才對

  • 一個mobx的counter大概得長成這樣吧
  const { observable, autorun } = require('mobx')
  const appState = observable({
    counter: 0,
    add(value){this.counter += value}
  })
  autorun(() => console.log(appState.counter))
  setInterval(() => appState.add(1), 1000)
複製程式碼

好像只用了7行，約莫是redux實現的一半大

我的天哪，多出了那麼多行程式碼，我還要不要下班了 3. 記憶體開銷對比:

  • 大小隻是浮於表面的東西，對於應用更友好的東西，才是核心的要點

    • 在寫redux的action的時候，總是需要用到擴充套件語句或者Object.assign()的方式來得到一個新的state，這一點對於JavaScript而言是物件的淺拷貝，它對記憶體的開銷肯定是大於mobX中那樣直接操作物件屬性的方式大得多。

    這一點比較6，算是一個可被重視的問題

以上內容黑得主角很明顯是屬於redux的，那，萬一我們換個視角看看呢
  1. 狀態管理的集中性:
    • mobX中竟然有這樣的寫法:
      const {observable} = require('mobx')
  const appState = observable({ counter: 0 })
  appState.counter += 1
複製程式碼
    直接修改狀態？這和react的理論完全相悖啊，還怎麼和react搭配使用啊，我的狀態萬一被同事給悄悄改了可是會引發一場戰爭的啊，還是開啟嚴格模式吧。
    • 你說redux做的怎麼樣？試試不通過action更新一下state,當然不能成功啊。
  2. 樣板程式碼的必要性:
    • 關於樣板程式碼，就要追溯到redux的基本設計選擇了，redux三大原則:
      • 單一資料來源
      • State 是隻讀的
      • 使用純函式來執行修改 所以可以說是這些樣本程式碼保證了state的狀態的可管理性，畢竟所有的東西都是涇渭分明的，讓出錯的可能性和找問題的成本降到了最低。

以上，使用mobX入門簡單，構建應用迅速，但是當專案足夠大的時候，還是使用redux，如果的確對mobX愛不釋手，那還是開啟嚴格模式，再加上一套狀態管理的規範吧。

相關文章