简单理解Mobx(二)：使用方法
上一节我们已经了解了为什么要使用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>
)
}
}
实现效果
Mobx实现效果
