React Native 中 MobX使用

MobX 通过透明的函数响应式编程(transparently applying functional reactive programming - TFRP)使得状态管理变得简单和可扩展。
MobX背后的哲学很简单:

任何源自应用状态的东西都应该自动地获得，其中包括UI、数据序列化、服务器通讯，等等。

flow.png

一、安装

• 安装:

npm install mobx --save

• 安装React 绑定库:

npm install mobx-react --save

• 安装启用 ESNext 的装饰器-@ (可选)

npm i --save-dev babel-plugin-transform-decorators-legacy

然后在 .babelrc 文件中启用它:

{
  "presets": ["react-native"],
  "plugins": ["transform-decorators-legacy"]
}

二、MobX 要点

• Observable state(可观察的状态)
  MobX 为现有的数据结构(如对象，数组和类实例)添加了可观察的功能。
  通过使用 @observable 装饰器(ES.Next)来给你的类属性添加注解就可以简单地完成这一切。
  这些 @ 开头的东西是ES.next装饰器（可选）。
  如果不支持装饰器或字段初始化器，那么 @observable key = value; 会是 extendObservable(this, { key: value }) 的语法糖。

 import { observable } from 'mobx';

 @observable title = "observable";

• Computed values(计算值)
  在相关数据发生变化时自动更新的值。

1. 可以在任意类属性的 getter 上使用 @computed 装饰器来声明式的创建计算属性。

import {observable, computed} from "mobx";

class Apple {
    @observable price = 0;
    @observable amount = 1;

    constructor(price) {
        this.price = price;
    }

    @computed get totalPrice() {
        return this.price * this.amount;
    }
}

2. 可以为计算值定义 setter。注意这些 setters 不能用来直接改变计算属性的值，但是它们可以用来作“逆向”衍生。

class Foo {
    @observable length = 2;
    @computed get squared() {
        return this.length * this.length;
    }
    set squared(value) { // 这是一个自动的动作，不需要注解
        this.length = Math.sqrt(value);
    }
}
*注意: 永远在 getter 之后 定义 setter，一些 TypeScript 版本会知道声明了两个具有相同名称的属性。
*注意: setter 需要 MobX 2.5.1 或者更高版本

3. 可以直接当做函数来调用，在返回的对象上使用 .get() 来获取计算的当前值，或者使用 .observe(callback) 来观察值的改变。

import {observable, computed} from "mobx";
var name = observable("John");

var upperCaseName = computed(() =>
    name.get().toUpperCase()
);

var disposer = upperCaseName.observe(change => console.log(change.newValue));

name.set("Dave");
// 输出: 'DAVE'

• Autorun
  当使用 autorun 时，所提供的函数总是立即被触发一次，然后每次它的依赖关系改变时会再次被触发。
• observer
  用来将 React 组件转变成响应式组件。 它用 mobx.autorun 包装了组件的 render 函数以确保任何组件渲染中使用的数据变化时都可以强制刷新组件。 observer 是由单独的 mobx-react 包提供的。

import { observer } from 'mobx-react';

var timerData = observable({
  secondsPassed: 0,
});

setInterval(() => {
  timerData.secondsPassed++;
}, 1000);

@observer
class Timer extends React.Component {
  render() {
    return <Text>{timerData.secondsPassed}</Text>;
  }
}
*注意，使用 @observer 装饰器是可选的，它和 observer(class Timer ... { }) 达到的效果是一样的。

• action (动作)
  用法:
  action(fn)
  action(name, fn)
  @action classMethod() {}
  @action(name) classMethod () {}
  @action boundClassMethod = (args) => { body }
  @action(name) boundClassMethod = (args) => { body }
  @action.bound classMethod() {}
  @action.bound(function() {})

任何应用都有动作。动作是任何用来修改状态的东西。 使用MobX你可以在代码中显式地标记出动作所在的位置。 动作可以有助于更好的组织代码。

应该永远只对修改状态的函数使用动作。 只执行查找，过滤器等函数不应该被标记为动作

class Ticker {
    @observable tick = 0

    @action.bound
    increment() {
        this.tick++ // 'this' 永远都是正确的
    }
}

const ticker = new Ticker()
setInterval(ticker.increment, 1000)