使用Mobx的7個技巧

one more time one more chance. 一歩重頭學前端, MobX。

Mobx 是個簡單且實用的 JS 庫，能夠用於 React 項目管理組件間的狀態。下面7個技巧是實戰中總結出來的。

MobX: Simple, scalable state management

Tip#1 正確理解概念

MobX 大部分概念很是好理解，在深刻理解每個以前，大概在腦子裏畫個藍圖有助於掌握MobX。下面四個概念是 Mobx 的基石：

1. observable： 可被追蹤變化的數據
2. observer： 響應observable 數據更新的組件
3. computed values: 可根據observable 數據計算返回值（此處的值也可理解爲是observable）的函數
4. reactions: 監聽observable 數據變化被觸發執行的不一樣類型的函數

Tip#2 使用正確的reactions

MobX提供了多種reactions供咱們 響應數據變化，不一樣的方式具備不一樣的特色，根據業務場景，咱們應該選出最優的方式。

1. autorun: 提供的函數老是當即被觸發一次, 依賴關係改變時會再次被觸發。依賴關係指的是在autorun函數中出現過的observable數據。
2. autorunAsync: same as autorun but you can specify how much time after it should run after the data changes in observables沒看到 API 中有該函數
3. when: 你能夠設置斷言，當斷言生效時響應函數會執行，響應僅會被觸發一次
4. reaction: 與 autorun 相似，函數不會當即執行

Tip#3 爲reactions命名

爲reactions命名的好處是當程序出錯時，能夠快速定位出錯位置。

Tip#4 使用嚴格模式

默認狀況下，MobX容許你隨便的更新observable數據。在大型應用中，若隨意的變動數據會使程序狀態沒法追蹤，不可預測。

爲此，MobX 提供了嚴格模式，強迫咱們只能夠在 action 中更新observable數據。

Tip#5 使用裝飾器

在使用 MobX 的使用咱們沒必要須使用ES2015的寫法，可是若是能夠，請使用修飾器寫法。使用修飾器咱們的代碼會變得更加的簡潔，而且很容易區分哪些數據是observable的、哪些不是。

原文還推薦你們使用TypeScript，可是我不會就不瞎說了。

Tip#6 使用多個 store

使用多個 store對觀測數據進行邏輯分組。

1. 一個用於 UI 狀態
2. 一個或多個用於領域狀態

Tip#7 Don’t use it

原文太長，我不想翻譯了。MobX 不是必須的，React 自己就能夠完成某些數據管理的任務，若是爲了用而用會致使程序的混亂。同時 MobX 和 Redux 各有利弊，也能夠適當的考慮使用 Redux。

引用

原做者 ppt
7 tips for using MobX

翻譯中，摻雜了我的愚見，請你們參考原文。
前端學習QQ羣: 538631558

【開發環境推薦】 Cloud Studio 是基於瀏覽器的集成式開發環境，支持絕大部分編程語言，包括 HTML五、PHP、Python、Java、Ruby、C/C++、.NET 小程序等等，無需下載安裝程序，一鍵切換開發環境。 Cloud Studio提供了完整的 Linux 環境，而且支持自定義域名指向，動態計算資源調整，能夠完成各類應用的開發編譯與部署。