官方文档-传送

MobX是响应式编程，实现状态的存储和管理。使用MobX将应用变成响应式可归纳为三部曲：

1. 定义状态并使其可观察
2. 创建视图以响应状态的变化
3. 更改状态

在介绍这三个步骤之前，我们先了解下MobX的核心API。

一、MobX核心API

1. Observable

observable是将类属性等进行标记，实现对其的观察。三部曲中的第一曲，就是通过Observable实现的。

observable
创建observable的方式很多，推荐使用ES7的装饰器（@observable），如何开启装饰器，后面将会介绍。
observable的value值的类型参照上图，observable包装后返回对应类型的值，如Observable Object等。

2. Actions

动作，通过action改变state。三部曲中的第一曲通过action创建一个动作。action函数是对传入的function进行一次包装，使得function中的observable对象的变化能够被观察到，从而触发相应的衍生。

action

• action(name,fn)：对fn函数进行包装/装饰，name将被用作调试名。
• runInAction：工具函数，是创建异步action的一种方式。
  action只会对当前包装/装饰的函数做出反应，而不会对当前运行函数所调用的函数（不包含在当前函数之内）作出反应！这意味着如果 action 中存在 setTimeout、promise 的 then 或 async 语句，并且在回调函数中某些状态改变了，那么这些回调函数也应该包装在 action 中。
  runInAction(f)实际上是action(f)()的语法糖。
• 强制action：设置强制模式后，action必须添加，否则报错。

3. 衍生

对observable的响应。三部曲中的第二部的实现方式。

衍生

衍生主要分为Reactions和Computed values。其中reactions是自动响应状态变化的副作用，如UI变化、控制台输出、后台服务传送数据。而Computed values（计算值）是自动响应状态变化的值。

• observer：包裹react组件的高阶组件，在render方法中，使用observable包装/装饰的属性。
• autorun：当你想创建一个响应式函数，但是该函数永远没有观察者，此时使用autorun。这通常是当你需要从反应式代码桥接到命令式代码的情况，例如打印日志、持久化或者更新UI的代码。
  当使用 autorun 时，所提供的函数总是立即被触发一次，然后每次它的依赖关系改变时会再次被触发。
  经验法则：如果你有一个函数应该自动运行，但不会产生一个新的值，请使用autorun。 其余情况都应该使用 computed。
• when: 观察并运行给定的 predicate，直到返回true。 一旦返回 true，给定的 effect 就会被执行，然后 autorunner(自动运行程序) 会被清理。 该函数返回一个清理器以提前取消自动运行程序。
• reaction: autorun 的变种，对于如何追踪 observable 赋予了更细粒度的控制。 它接收两个函数参数，第一个(数据 函数)是用来追踪并返回数据作为第二个函数(效果 函数)的输入。
  在执行 效果 函数时访问的任何 observable 都不会被追踪。
• computed：计算值(computed values)是可以根据现有的状态或其它计算值衍生出的值，创建的一个衍生属性。
• MobX响应：并非从observable获取了值，MobX就一定响应，如果是在追踪函数之外和异步回调中使用，MobX将不会做出响应。
  “追踪函数” 是 computed 表达式、observer 组件的 render() 方法和when、reaction 和 autorun 的第一个入参函数。

4. Decorators

装饰器，可使用的装饰器列表

observable.deep
observable.ref
observable.shallow
computed
action
action.bound

可以使用 @decorator 语法来应用这些装饰器。

[官方文档说明]

• observable.deep: 所有 observable 都使用的默认的装饰器。它可以把任何指定的、非原始数据类型的、非 observable 的值转换成 observable。
• observable.ref: 禁用自动的 observable 转换，只是创建一个 observable 引用。
• observable.shallow: 只能与集合组合使用。 将任何分配的集合转换为浅 observable (而不是深 observable)的集合。 换句话说, 集合中的值将不会自动变为 observable。
• computed: 创建一个衍生属性, 参见 computed
• action: 创建一个动作, 参见 action
• action.bound: 创建有范围的动作, 参见 action

5. FLOW

创建异步action的一种方式，这里不介绍了。官网传送

二、 开启装饰器（Decorators）

（1）添加装饰器依赖：babel-plugin-transform-decorators-legacy
（2）.babelrc文件添加配置

"plugins": ["transform-decorators-legacy"]

三、三部曲

通过一个小demo，讲述如何使用MobX将应该用变成响应式。

首先必须先添加mobx和mobx-react依赖，装饰器依赖根据用户选择添加。

1. 第一曲

定义状态并使其可观察

新建mobx文件夹，observable的相关.js文件存储在此，如下图所示：

image.png

如何定义状态，并使得其可观察呢？接着看代码：
counter_store.js（计数）：

import { observable } from 'mobx'

class CounterStore {
    @observable counter = 0;
    @observable remoteCounter = 0;

    constructor(){}

increment(){
        this.counter++;
    }

    decrement(){
        this.counter--;
    }

    incrementAsync(){
        setTimeout(()=>{
            this.counter++
        },500);
    }
}

const counterStore = new CounterStore;

export default counterStore;

CounterStroe类中，对counter、remoteCounter使用了observable装饰器，即将counter、remoteCounter定义为MobX的状态，并可观察。

虽然increment、decrement、incrementAsync函数前无@action，但是因为没有设置强制action，所以默认被action装饰，都是创建了一个动作。

2. 第二曲

创建视图以响应状态的变化

首先使用observer包裹React组件的高级组件：

@observer
export default class HomeScreen extends Component {
  ...
}

其次，在HomeScreen组件的render方法中，使用被observable转换的值。

import counterStore from '../../mobx/counter_store'

    render() {
        return (
            <View style={styles.container}>
                <Text>Counter Container Test</Text>
                <Text>Clicked:<Text>{`${counterStore.counter}times`}</Text></Text>
                <Text onPress={()=>counterStore.increment()}>| +1 |</Text>
                <Text onPress={()=>counterStore.incrementAsync()}>| +1 Async |</Text>
            </View>
        );
    }
}

3. 第三曲

更改状态

在CounterStore类中，通过action创建了三个动作，分别是increment、decrement、incrementAsync。通过调用action装饰过的函数，实现更改状态的目的。
请看代码，onPress事件中调用函数：

import counterStore from '../../mobx/counter_store'

    render() {
        return (
            <View style={styles.container}>
                <Text>Counter Container Test</Text>
                <Text>Clicked:<Text>{`${counterStore.counter}times`}</Text></Text>

                <Text onPress={()=>counterStore.increment()}>| +1 |</Text>
                <Text onPress={()=>counterStore.incrementAsync()}>| +1 Async |</Text>
            </View>
        );
    }
}

当点击‘+1’时，上面的次数显示会响应的变化。这就是所谓的副作用一种形式。

拓展

如何进行状态的引用呢？

两种方式：

• 全局注册并注入store实例
• 直接import引用

全局注册并注入store
我参考的demo：https://juejin.im/post/5a3f06cd6fb9a044fe4693bc
demo中使用了Provider进行全局注册并注入Rootstore实例

const Navigation = () => {
    return (
        <Provider rootStore={store}>
            <Navigator/>
        </Provider>
    )
}

在需要使用的组件中，使用@inject('rootStore') ，我们就可以愉快地使用 this.props.rootStore 来拿到我们想要的数据啦

@inject('rootStore')
@observer
export default class HomeScreen extends Component {
  ...
}

注：@observer也需要添加，不然不会随着rootStore属性变化而重新渲染。

直接import引用
不进行全局注册，而是在需要使用mobx的Rootstore实例的组件中进行引用即可。

import counterStore from '../../mobx/counter_store'

Github项目demo