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(计算值)
在相关数据发生变化时自动更新的值。
- 可以在任意类属性的 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;
}
}
- 可以为计算值定义 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 或者更高版本
- 可以直接当做函数来调用，在返回的对象上使用 .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)
