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

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

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

• 目的一致

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

• 受眾大體一致

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

• 可相互替代

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

學(xué)習(xí)難度對比:

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

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

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

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

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

const { createStore } = require('redux')const ADD = 'ADD'const initState = {count: 0}// actionfunction counter(state = initState, action) {switch(action.type) {case ADD:return {...state, count: state.count + action.payload.count}default:return state}}// reducerconst AddOne = () => ({type: ADD, payload: {count:1}})// storeconst store = createStore(counter)store.subscribe(() => console.log(store.getState()))setInterval(() => store.dispatch(AddOne()), 1000) 復(fù)制代碼

不算注釋，大約15行左右，那么，mobx想要具備壓倒性的優(yōu)勢，應(yīng)該極力控制自己的大小才對

• 一個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) 復(fù)制代碼

好像只用了7行，約莫是redux實現(xiàn)的一半大

我的天哪，多出了那么多行代碼，我還要不要下班了 3. 內(nèi)存開銷對比:

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

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

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

---

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

---

狀態(tài)管理的集中性:

• mobX中竟然有這樣的寫法:

const {observable} = require('mobx')const appState = observable({ counter: 0 })appState.counter += 1 復(fù)制代碼直接修改狀態(tài)？這和react的理論完全相悖啊，還怎么和react搭配使用啊，我的狀態(tài)萬一被同事給悄悄改了可是會引發(fā)一場戰(zhàn)爭的啊，還是開啟嚴(yán)格模式吧。

• 你說redux做的怎么樣？試試不通過action更新一下state,當(dāng)然不能成功啊。

樣板代碼的必要性:

• 關(guān)于樣板代碼，就要追溯到redux的基本設(shè)計選擇了，redux三大原則:
  • 單一數(shù)據(jù)源
  • State 是只讀的
  • 使用純函數(shù)來執(zhí)行修改 所以可以說是這些樣本代碼保證了state的狀態(tài)的可管理性，畢竟所有的東西都是涇渭分明的，讓出錯的可能性和找問題的成本降到了最低。

---

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

總結(jié)

以上是生活随笔為你收集整理的redux 和 mobX对比的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。