简单理解Mobx(二)：使用方法

上一节我们已经了解了为什么要使用Mobx，简单理解Mobx(一)：使用目的

这节我们来看看如何引入并使用Mobx

引入

1. 引入Mobx
   执行
   npm install mob --save
   以及
   npm install mobx-react --save

2. 支持@装饰器
   我们看到之前的例子中使用到了@装饰器，工程中默认并没有支持@装饰器，因此我们还需要安装插件:
   执行
   npm i babel-plugin-trans form-decorators-legacy --save-dev
   以及，在.babelrc文件中添加plugins属性：
   {
   "presets": ["react-native"],
   "plugins": ["transform-decorators-legacy"]
   }

3. 执行npm install

使用

先附上Mobx的文档

Mobx中包含了几个重要的属性和字段，分别有：

1. observable
2. action
3. compute
4. observer
5. autorun

虽然有5个属性，但总体来讲主要分为3类：

1. 被观察者：observable
2. 观察者：observer，autorun
3. 修改被观察者的方法：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 (
            {observableData}
        )
    }
}

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 (
            
                {testStore.name}
                 {
                    testStore.updateName('Mobx -----> ' + this.i++)
                }}/>
            
        )
    }
}

实现效果

Mobx实现效果