十分钟带你理解Mobx


官网地址：https://mobx.js.org/README.html

Simple, scalable state management 简单，可扩展的状态管理器

安装

1
npm install -s mobx mobx-react

创建监视数据

用法：

  • observable(value)
  • @observable classProperty = value
    Observable 值可以是JS基本数据类型、引用类型、普通对象、类实例、数组和映射。 匹配类型应用了以下转换规则，但可以通过使用调节器进行微调。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
const map = observable.map({ key: "value" })
map.set("key", "new value")

const list = observable([1, 2, 4])
list[2] = 3

const person = observable({
    firstName: "Clive Staples",
    lastName: "Lewis"
})
person.firstName = "C.S."

const temperature = observable.box(20)
temperature.set(25)

改变数据 observables

用法:

  • action(fn) action(name, fn)
  • @action classMethod() {}
  • @action(name)
    classMethod () {}
  • @action boundClassMethod = (args) => { body }
  • @action(name) boundClassMethod = (args) => { body }
  • @action.bound
    classMethod() {}
    任何应用都有动作。动作是任何用来修改状态的东西。
    案例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import React from "react";
import { observer } from "mobx-react";
import { action, observable, autorun, when} from "mobx";
// create observer
const appState = observable({ timer: 0 });

// create action
const addTimer = action(() => {
 setTimeout(()=>{ appState.timer += 1}, 1000)
})

const resetTimer = action(() => {
  appState.timer = 0;
})
const App = observer((appState) => {
  return (
    <div className="App">
      timer值：{appState.timer }
      <button onClick={addTimer}>add+1 </button>
      <button onClick={resetTimer}>resetTimer </button>
    </div>
  );
});

export default App

类案例，

1
2
3
4
5
6
7
8
9
10
11
class Ticker {
    @observable tick = 0

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

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

监听改变及响应

  1. computed 计算值
  2. autorun 响应式函数
  3. when 自定义响应
  4. reaction 更颗粒度的autorun

1.computed 计算值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
class MobxClass extends  React.Component{
  @observable price = 10;

  @observable amount = 6.8;

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

  render(){
    return (
      <div>
        <p>price: {this.price}</p>
        <p>amount: {this.amount}</p>
        <p><center>[wp_ad_camp_3]</center></p><p>price*amount:{this.total}</p>
      </div>
    )
  }
}

export default MobxClass

2. autorun 响应式函数

选项

Autorun 接收第二个参数，它是一个参数对象，有如下可选的参数:

  • delay: 可用于对效果函数进行去抖动的数字(以毫秒为单位)。如果是 0(默认值) 的话，那么不会进行去抖。
  • name: 字符串，用于在例如像 spy 这样事件中用作此 reaction 的名称。
  • onError: 用来处理 reaction 的错误，而不是传播它们。
  • scheduler: 设置自定义调度器以决定如何调度 autorun 函数的重新运行
1
2
3
4
5
6
7
8
9
autorun(() => {
    console.log('autorun')
}, {
name: 'john',
delay: 300,
onError(e) {
        window.alert("Please enter a valid age")
    },
 });

3.when 自定义反应

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
class MyResource {
    constructor() {
        when(
            // 一旦...
            () => !this.isVisible,
            // ... 然后
            () => this.dispose()
        );
    }

    @computed get isVisible() {
        // 标识此项是否可见
    }

    dispose() {
        // 清理
    }
}

4.Reaction

autorun 的变种，对于如何追踪 observable 赋予了更细粒度的控制。

用法: reaction(() => data, (data, reaction) => { sideEffect }, options?)。

选项

Reaction 接收第三个参数，它是一个参数对象，有如下可选的参数:

粗略地讲，reaction 是 computed(expression).observe(action(sideEffect)) 或 autorun(() => action(sideEffect)(expression)) 的语法糖。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const counter = observable({ count: 0 });

// 只调用一次并清理掉 reaction : 对 observable 值作出反应。
const reaction3 = reaction(
    () => counter.count,
    (count, reaction) => {
        console.log("reaction 3: invoked. counter.count = " + count);
        reaction.dispose();
    }
);

counter.count = 1;
// 输出:
// reaction 3: invoked. counter.count = 1

counter.count = 2;
// 输出:
// (There are no logging, because of reaction disposed. But, counter continue reaction)

console.log(counter.count);
// 输出:
// 2