1. 程式人生 > >[web 前端] mobx教程(一)-mobx簡介

[web 前端] mobx教程(一)-mobx簡介

opy from : https://blog.csdn.net/smk108/article/details/84777649

 

Mobx是通過函式響應式程式設計使狀態管理變得簡單和可擴充套件的狀態管理庫。Mobx和Redux一樣,採用單向資料流管理狀態:通過action改變應用的state,state的改變觸發相應ui的更新,如下圖所示:

 

Mobx有如下幾個主要概念:

State:狀態,應該是應用依賴的最小狀態集,沒有任何多餘的狀態,也不需要通過其他狀態計算而來的中間狀態;

Computed value:計算值,是根據state推導計算出來的值;

Reaction:響應,受state影響,會對state的變化做出一些更新ui、列印日誌等反應;

Action:動作,建議是唯一可以修改狀態的方式;

結合單向資料流管理方式和上述概念,Mobx的主要流程如下圖所示:

 

 

Mobx整體是一個觀察者模式,儲存state的store是被觀察者,使用store的元件是觀察者。當action改變被觀察的state之後,computed value和reactin會自動根據state的改變做最小化更新,需要注意的是computed value採用延遲更新的方式,只有待更新的computed value被使用時才會被重新計算,不然,computed value不僅不會被重新計算,還會被自動回收。

MobX背後的哲學很簡單: 任何源自應用狀態的東西都應該自動地獲得。

 

Mobx與React是非常強力的一對組合,我在使用React+Mobx做開發時,感覺Mobx還是很好用的,並在我們FE團隊做了一個簡單的分享,推薦同事嘗試使用。當然,在開發中也遇到了一些問題,現在把我的總結分享給大家,隨時歡迎相關的技術交流。

接下來,我會按照如下的list進行總結,更新完某一篇後會在相應的title上新增超連結,同時會根據自己不斷使用的理解進行持續更新。

目錄如下:

簡介
Mobx主要概念
在React中使用Mobx
Mobx定義資料儲存
Mobx常見問題及解決方案(1)嚴格模式
Mobx常見問題及解決方案(2)不主動更新問題
Mobx工具函式
Mobx除錯工具

 

---------------------
作者:smk108
來源:CSDN
原文:https://blog.csdn.net/smk108/article/details/84777649
版權宣告:本文為博主原創文章,轉載請附上博文連結!