MobX快速入門教程（重要概念講解）

轉載請注明原文地址：http://www.cnblogs.com/ygj0930/p/7372119.html

?

一：Mobx工作流程圖

?

二：MobX涉及到的概念

1:狀態state

組件中的數據。

2:被觀察observable

被observable修飾的state數據將會暴露給整個app，各觀察者組件都可以根據state值的變化作出響應。

3:觀察者observer

被observer修飾的組件，將會根據組件內使用到的被observable修飾的state的變化而自動重新渲染（原理：用autorun包裹了render函數，state變化觸發autorun從而自動渲染）

4:action

state值的修改需要在action函數中進行。

5:衍生值computed

get：基于state值，通過一些計算得到的新值并返回給調用者。

set：get的相反運算，參數為一個值，由該值進行get函數中的反運算，得到對應的state值并賦予state。

6:衍生行為autorun

基于state的變化而觸發的一系列行為（注意：這些行為不改變state值、不產生新的數據），通常為日志記錄、請求發送、UI渲染等。

?

三：Mobx的使用

掌握了上面的基本概念，Mobx的使用流程就清晰了：

新建一個mobx目錄，在其中新建一個appStore.js文件，專門用于管理整個app的state。appStore中定義一個Component，在組件中：

1:定義需要被全局觀察的state，用@observable修飾

2:定義改變state的行為函數，用@action修飾

3:定義基于某state，通過計算產生新值的get函數，用@computed修飾

4:定義基于所傳參數，通過計算得到state值的set函數，用@computed修飾

5:定義基于state變化，自動觸發的行為函數，用@autorun修飾

6:在文件末尾，新建一個該組件的實例，并export

然后，在其他組件文件中，就可以import 這個組件實例，直接使用 ?組件實例.XXX ?訪問數據、方法了。

注意：其他組件是觀察者組件，用@observer修飾。