上一節(jié)我們已經(jīng)了解了為什么要使用Mobx，簡(jiǎn)單理解Mobx(一)：使用目的
這節(jié)我們來看看如何引入并使用Mobx
引入
引入Mobx
執(zhí)行
npm install mob --save
以及
npm install mobx-react --save支持@裝飾器
我們看到之前的例子中使用到了@裝飾器专控，工程中默認(rèn)并沒有支持@裝飾器，因此我們還需要安裝插件:
執(zhí)行
npm i babel-plugin-trans form-decorators-legacy --save-dev
以及漂彤，在.babelrc文件中添加plugins屬性：
{
"presets": ["react-native"],
"plugins": ["transform-decorators-legacy"]
}執(zhí)行npm install
使用
先附上Mobx的文檔
Mobx中包含了幾個(gè)重要的屬性和字段，分別有：
- observable
- action
- compute
- observer
- autorun
雖然有5個(gè)屬性灾搏，但總體來講主要分為3類：
- 被觀察者：observable
- 觀察者：observer显歧，autorun
- 修改被觀察者的方法：action，compute
只要程序中包含了這3類确镊，Mobx就能發(fā)揮作用了，現(xiàn)在就來講解一下每個(gè)屬性的作用：
observable
一般observable用于修飾變量范删，這些變量通常用于展示會(huì)變化的數(shù)據(jù)
如：
@observable data = 0
@observable arr = []
@observable map = new Map()
observer和autorun
observer和autorun本質(zhì)上都是autorun蕾域，只不過observer一般用于修飾Component，這個(gè)修飾的作用其實(shí)就是相當(dāng)于用autorun將Component的render()包裝起來
那這個(gè)autorun的作用是什么呢到旦？
答案就是觀察observable變量旨巷，只要觀察的observable變量變了，被autorun包裝的函數(shù)就會(huì)自動(dòng)執(zhí)行
當(dāng)autorun包裝的是Component的render()方法添忘，也就是用@observer裝飾Component時(shí)采呐，只要在render中使用了observable變量，那么當(dāng)變量改變時(shí)搁骑，render就會(huì)重新觸發(fā)斧吐，這不就是“刷新”效果嗎又固？
使用方法如下：
只要其中的observableData變化了，那么render()就會(huì)重新觸發(fā)煤率，從而刷新界面仰冠，實(shí)時(shí)顯示observableData的值
@observer
export default class MyComponent extends Component {
render() {
return (
<Text>{observableData}</Text>
)
}
}
action和computed
這兩個(gè)修飾符都是用于修飾方法的，本質(zhì)上差不多蝶糯，computed其實(shí)也可以用action實(shí)現(xiàn)洋只，因此這里只介紹action
實(shí)際上，Mobx的作用昼捍，通過observable和observer就已經(jīng)可以實(shí)現(xiàn)完整的功能（只要observable的變量變化识虚，那observer就會(huì)相應(yīng)刷新）了，那為什么還要加上action這個(gè)東西呢妒茬？
答：事實(shí)上也確實(shí)是這樣担锤，不用action也能實(shí)現(xiàn)完整的功能，但是Mobx在嚴(yán)格模式下郊闯，修改observable變量的方法必須加上action裝飾器妻献，不然會(huì)報(bào)錯(cuò)，一方面也是為了保證我們寫的代碼的質(zhì)量吧团赁，下面我們來說說action修飾的方法是做什么的
首先來看看什么時(shí)候需要用到action修飾
答案就是需要修改observable變量的方法育拨。Mobx建議，我們不要在外部沒有action的方法中修改observable變量欢摄，如observableData = 'new Value'熬丧，就算只有一行賦值語(yǔ)句，也應(yīng)該封裝進(jìn)方法中怀挠，并加上action裝飾器析蝴，如下所示
@action
updateData(newValue) {
this.observableData = newValue
}
這樣能夠保持我們的代碼結(jié)構(gòu)清晰。所以說action也就這個(gè)作用了绿淋。
完整的使用示例
最后利用observable闷畸、action和observer來完整展示一下Mobx的使用方法，希望能夠幫助到剛開始接觸Mobx而導(dǎo)致不懂怎么使用的同學(xué)吞滞。
這里的效果就是佑菩，點(diǎn)擊Button時(shí)，Text顯示的內(nèi)容會(huì)變化
一般某些被觀察者變量在多個(gè)界面被調(diào)用裁赠，因此我們通常將observable和action方法裝在一個(gè)類當(dāng)中殿漠，這里就放在TestStore當(dāng)中吧：
TestStore.js
import {
action,
observable
} from 'mobx'
export default class TestStore {
@observable name
@action
updateName(newName) {
this.name = newName
}
}
然后就是展示界面TestScreen.js
import React, {Component, PureComponent} from 'react'
import {Button, Text, View,} from 'react-native'
import {observer,} from 'mobx-react'
import {testStore} from "../store/index";
@observer
export default class TestScreen extends Component {
i = 0
render() {
return (
<View style={{flex: 1, justifyContent: 'space-between'}}>
<Text style={{fontSize: 20,}}>{testStore.name}</Text>
<Button title="Mobx" onPress={() => {
testStore.updateName('Mobx -----> ' + this.i++)
}}/>
</View>
)
}
}
實(shí)現(xiàn)效果
