上一節我們已經了解了為什么要使用Mobx，簡單理解Mobx(一)：使用目的
這節我們來看看如何引入并使用Mobx
引入
引入Mobx
執行
npm install mob --save
以及
npm install mobx-react --save支持@裝飾器
我們看到之前的例子中使用到了@裝飾器，工程中默認并沒有支持@裝飾器，因此我們還需要安裝插件:
執行
npm i babel-plugin-trans form-decorators-legacy --save-dev
以及，在.babelrc文件中添加plugins屬性：
{
"presets": ["react-native"],
"plugins": ["transform-decorators-legacy"]
}執行npm install
使用
先附上Mobx的文檔
Mobx中包含了幾個重要的屬性和字段，分別有：
- observable
- action
- compute
- observer
- autorun
雖然有5個屬性，但總體來講主要分為3類：
- 被觀察者：observable
- 觀察者：observer，autorun
- 修改被觀察者的方法：action，compute
只要程序中包含了這3類，Mobx就能發揮作用了，現在就來講解一下每個屬性的作用：
observable
一般observable用于修飾變量，這些變量通常用于展示會變化的數據
如：
@observable data = 0
@observable arr = []
@observable map = new Map()
observer和autorun
observer和autorun本質上都是autorun，只不過observer一般用于修飾Component，這個修飾的作用其實就是相當于用autorun將Component的render()包裝起來
那這個autorun的作用是什么呢？
答案就是觀察observable變量，只要觀察的observable變量變了，被autorun包裝的函數就會自動執行
當autorun包裝的是Component的render()方法，也就是用@observer裝飾Component時，只要在render中使用了observable變量，那么當變量改變時，render就會重新觸發，這不就是“刷新”效果嗎？
使用方法如下：
只要其中的observableData變化了，那么render()就會重新觸發，從而刷新界面，實時顯示observableData的值
@observer
export default class MyComponent extends Component {
render() {
return (
<Text>{observableData}</Text>
)
}
}
action和computed
這兩個修飾符都是用于修飾方法的，本質上差不多，computed其實也可以用action實現，因此這里只介紹action
實際上，Mobx的作用，通過observable和observer就已經可以實現完整的功能（只要observable的變量變化，那observer就會相應刷新）了，那為什么還要加上action這個東西呢？
答：事實上也確實是這樣，不用action也能實現完整的功能，但是Mobx在嚴格模式下，修改observable變量的方法必須加上action裝飾器，不然會報錯，一方面也是為了保證我們寫的代碼的質量吧，下面我們來說說action修飾的方法是做什么的
首先來看看什么時候需要用到action修飾
答案就是需要修改observable變量的方法。Mobx建議，我們不要在外部沒有action的方法中修改observable變量，如observableData = 'new Value'，就算只有一行賦值語句，也應該封裝進方法中，并加上action裝飾器，如下所示
@action
updateData(newValue) {
this.observableData = newValue
}
這樣能夠保持我們的代碼結構清晰。所以說action也就這個作用了。
完整的使用示例
最后利用observable、action和observer來完整展示一下Mobx的使用方法，希望能夠幫助到剛開始接觸Mobx而導致不懂怎么使用的同學。
這里的效果就是，點擊Button時，Text顯示的內容會變化
一般某些被觀察者變量在多個界面被調用，因此我們通常將observable和action方法裝在一個類當中，這里就放在TestStore當中吧：
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>
)
}
}
實現效果
