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

一：Mobx工作流程圖

二：MobX涉及到的概念

1:狀態(tài)state

組件中的數(shù)據(jù)。

2:被觀察observable

被observable修飾的state數(shù)據(jù)將會暴露給整個(gè)app，各觀察者組件都可以根據(jù)state值的變化作出響應(yīng)。

3:觀察者observer

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

4:action

state值的修改需要在action函數(shù)中進(jìn)行。

5:衍生值computed

get：基于state值，通過一些計(jì)算得到的新值并返回給調(diào)用者。

set：get的相反運(yùn)算，參數(shù)為一個(gè)值，由該值進(jìn)行g(shù)et函數(shù)中的反運(yùn)算，得到對應(yīng)的state值并賦予state。

6:衍生行為autorun

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

三：Mobx的使用

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

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

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

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

3:定義基于某state，通過計(jì)算產(chǎn)生新值的get函數(shù)，用@computed修飾

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

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

6:在文件末尾，新建一個(gè)該組件的實(shí)例，并export

然后，在其他組件文件中，就可以import 這個(gè)組件實(shí)例，直接使用 組件實(shí)例.XXX 訪問數(shù)據(jù)、方法了。

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

總結(jié)

以上是生活随笔為你收集整理的MobX快速入门教程（重要概念讲解）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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