• 以下內(nèi)容會(huì)嚴(yán)格遵循下面三個(gè)觀點(diǎn)

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

• 為什么這兩個(gè)庫可以被用來對(duì)比

  1. 目的一致

  都是狀態(tài)管理庫，用來管理應(yīng)用的內(nèi)部狀態(tài)

  2. 受眾大體一致

  一般都會(huì)被用到react中，雖然說這并不是必須的，你當(dāng)然也可以用到vue或者angular里，但是，大多數(shù)情況下，都不會(huì)這么做

  3. 可相互替代

  在項(xiàng)目之初，你可以選擇二者之一來滿足你的項(xiàng)目需求，但是到某一天你突然覺得另一個(gè)更和你氣味相投，你完全可以花點(diǎn)時(shí)間遷移過去，你會(huì)發(fā)現(xiàn)，它似乎也能滿足你的那些需求

1. 學(xué)習(xí)難度對(duì)比:

   • mobX的學(xué)習(xí)中，你可以聽信關(guān)于30分鐘快速入門的神話，這畢竟不是對(duì)一個(gè)語言而言的《7天從入門到精通》系列，因?yàn)樗娴暮芎唵危⑶以谶@三十分鐘過去之后，你唯一需要花的時(shí)間就是偶爾翻翻文檔就可以自如的使用它了。
   • redux的入門學(xué)習(xí)也沒那么難，即使有些概念顯得比較抽象，你最多需要多花上半個(gè)小時(shí)就可以掌握它們了，但是當(dāng)你真的去使用的時(shí)候，你會(huì)發(fā)現(xiàn)這一切原來并非想象的那么簡單，你不得不花更多的時(shí)間來學(xué)習(xí)更多：

   當(dāng)你需要異步的時(shí)候，你不得不考慮redux-thunk，你怎么可能不需要異步
   想用Promise，沒問題，先看看redux-promise-middleware怎么樣
   想搞個(gè)日志之類的東西，redux-logger已經(jīng)準(zhǔn)備好了
   當(dāng)你需要使用state中的兩個(gè)值來計(jì)算出一個(gè)值的時(shí)候，你如果稍有代碼潔癖，你肯定不愿意這樣做，這時(shí)候，你需要的東西叫做Reselect
   ...

   第一波黑的不錯(cuò)，你有沒有望而卻步

2. 工作量對(duì)比（以下代碼直接在nodejs環(huán)境下測試）:

   • 一般來講，這里應(yīng)該用一個(gè)couter之類的示例來做

  const { createStore } = require('redux')
  const ADD = 'ADD'
  const initState = {count: 0}
  // reducer
  function counter(state = initState, action) {
    switch(action.type) {
      case ADD:
        return {...state, count: state.count + action.payload.count}
      default:
        return state
    }
  }
  // actions
  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想要具備壓倒性的優(yōu)勢，應(yīng)該極力控制自己的大小才對(duì)

• 一個(gè)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實(shí)現(xiàn)的一半大

我的天哪，多出了那么多行代碼，我還要不要下班了

3. 內(nèi)存開銷對(duì)比:

• 大小只是浮于表面的東西，對(duì)于應(yīng)用更友好的東西，才是核心的要點(diǎn)

  • 在寫redux的action的時(shí)候，總是需要用到擴(kuò)展語句或者Object.assign()的方式來得到一個(gè)新的state，這一點(diǎn)對(duì)于JavaScript而言是對(duì)象的淺拷貝，它對(duì)內(nèi)存的開銷肯定是大于mobX中那樣直接操作對(duì)象屬性的方式大得多。

  這一點(diǎn)比較6，算是一個(gè)可被重視的問題

以上內(nèi)容黑得主角很明顯是屬于redux的，那，萬一我們換個(gè)視角看看呢

1. 狀態(tài)管理的集中性:
   • mobX中竟然有這樣的寫法:

     const {observable} = require('mobx')
     const appState = observable({ counter: 0 })
     appState.counter += 1
   

   直接修改狀態(tài)？這和react的理論完全相悖啊，還怎么和react搭配使用啊，我的狀態(tài)萬一被同事給悄悄改了可是會(huì)引發(fā)一場戰(zhàn)爭的啊，還是開啟嚴(yán)格模式吧。
   • 你說redux做的怎么樣？試試不通過action更新一下state,當(dāng)然不能成功啊。
2. 樣板代碼的必要性:
   • 關(guān)于樣板代碼，就要追溯到redux的基本設(shè)計(jì)選擇了，redux三大原則:
     • 單一數(shù)據(jù)源
     • State 是只讀的
     • 使用純函數(shù)來執(zhí)行修改
       所以可以說是這些樣本代碼保證了state的狀態(tài)的可管理性，畢竟所有的東西都是涇渭分明的，讓出錯(cuò)的可能性和找問題的成本降到了最低。

以上，使用mobX入門簡單，構(gòu)建應(yīng)用迅速，但是當(dāng)項(xiàng)目足夠大的時(shí)候，還是使用redux，如果的確對(duì)mobX愛不釋手，那還是開啟嚴(yán)格模式，再加上一套狀態(tài)管理的規(guī)范吧。