MobX.js 使用笔记

[aototo]

mobx 笔记

API

observable 和 autorun

observable 用来观察对象，数组，类等数据结构

使用方式：

• observable(value)
• @observable classProperty = value

例子：

import {observable} from 'mobx';

var name = observable('aotu');

//ES7 装饰器的使用
class Aotu {
    @observable name = 'aotu'
}

使用autorun去观察依赖的相关数据的变化（下面demo中只有name的值发生改变才会触发该函数）

var disposer = autorun(() => console.log(name.get()));

更多匹配类型应用转换规则 https://cn.mobx.js.org/refguide/observable.html

Computed values

创建计算值, 并返回，纯函数形式，内部做了优化，当参数相同时候不从新计算

// ES7 装饰器的使用
import {observable, computed} from "mobx";

class Sum {
    @observable price = 1;

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

// 不使用 decorate
import {decorate, observable, computed} from "mobx";

class Sum {
    price = 1;
    get total() {
        return this.price * 10;
    }
}

decorate(Sum, {
    price: observable,
    total: computed
})

action

把一些修改状态的fn放在action里面，以便更好的管理代码，（严格模式开启，限制其他地方随意改变需要的值，降低不确定性）。

例子

import {observable, action} from 'mobx';
useStrict(true);
class Store {
  @observable number = 0;
  @action add = () => {
    this.number++;
  }
}

const newStore = new Store();
newStore.add();

runInAction

runInAction 其实就是action的语法糖action(fn))() 主要用在异步的回调时候立即执行，action只会影响当前执行的动作。

例子：

useStrict(true);

class Store {
  @observable userName = '';
  @action load = async () => {
    const data = await getUserData();
    runInAction(() => {
      this.userName = data.userName;
    });
  }
}

Autorun

所提供的函数总是立即被触发一次, 而当观测到的数据发生变化的时候，如果变化的值处在autorun中，那么autorun就会自动执行。

class User {
  @observable name;

  @action
  setName(name) {
    this.name = name
  }
}

let user = new User()
user.setName('aotu')

//每次修改打印name ,值相同不打印
autorun(() => console.log(user.name))

Reaction

Reaction是autorun 的变种，对于如何追踪 observable 赋予了更细粒度的控制。接收两个函数参数，第一个(数据 函数)是用来追踪并返回数据作为第二个函数(效果 函数)的输入。 不同于 autorun 的是当创建时效果 函数不会直接运行，只有在数据表达式首次返回一个新值后才会运行。 在执行 效果 函数时访问的任何 observable 都不会被追踪。

class User {
  @observable user = {
      name: '',
      age: 0
  };

  @action
  setName(name) {
    this.user.name = name
  }
  
  @action
  setAge(value) {
    this.user.age = value
  }
}

//只有name发生变化的时候，才会执行该函数，age发生改变则不会运行
let userReaction = reaction(
  () => user.name,
  (value) => console.log(value)
);

reaction 返回一个清理函数，可以在不需要的时候，运行返回函数，节省内存开销

//直接执行
userReaction()

后续更新... 参考：https://cn.mobx.js.org/