【前端学习笔记】mobx初认识

https://segmentfault.com/a/1190000015554899

定义

1、React的render是将存储的状态转化为树状结构来渲染组件的方法； Mobx是用来存储和更新状态的工具；

2、React使用的方法是采用虚拟Dom来进行view视图的缓存，来减少繁琐的Dom更新 而Mobx则通过一个虚拟的状态依赖图表来让react组件和应用状态同步化来减少不必要的状态来更新组件的

通过观察者模式对数据做出追踪处理，在对可观察属性的作出变更或者引用的时候，触发其依赖的监听函数。

与其他状态管理工具的区别

1、对比Redux
Redux的编程范式是函数式的而Mobx是面向对象的；因此数据上来说Redux理想的是immutable的，每次都返回一个新的数据，而Mobx从始至终都是一份引用。因此Redux是支持数据回溯的； 然而和Redux相比，使用Mobx的组件可以做到精确更新，这一点得益于Mobx的observable；对应的，Redux是用dispath进行广播，通过Provider和connect来比对前后差别控制更新粒度，有时需要自己写SCU；
Mobx更加精细一点。

2、对比Vuex
component–>dispatch(action)–>mutation–(mutate)–>state–>component
vuex中提出了同步mutation和异步action，现在mobx也无需mutaiton，但借鉴了computed这个纯函数。

相比这两个工具，MobX内置了数据变化监听机制，使得在实际应用的时候一切都是那么的顺其自然。

MobX的数据驱动解构：
action–(update)–>state–(update)–>computed–(trigger)–>reaction

Mobx的核心原理是通过action触发state的变化，进而触发state的衍生对象（computed value & Reactions）。

核心概念

observable用法

observable(value)
@observable classProperty = value

Observable 值可以是JS基本数据类型、引用类型、普通对象、类实例、数组和映射。 匹配类型应用了以下转换规则，但可以通过使用调节器进行微调。
例如：

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);

如果 value 是ES6的 Map : 会返回一个新的 Observable Map。如果你不只关注某个特定entry的更改，而且对添加或删除其他entry时也做出反应的话，那么 Observable maps 会非常有用
如果 value 是数组，会返回一个 Observable Array。
如果 value 是没有原型的对象，那么对象会被克隆并且所有的属性都会被转换成可观察的。参见 Observable Object。

如果 value 是有原型的对象，JavaSript 原始数据类型或者函数，会返回一个 Boxed Observable。MobX 不会将一个有原型的对象自动转换成可观察的，因为这是它构造函数的职责。在构造函数中使用 extendObservable 或者在类定义中使用 @observable。

如果 value 是有原型的对象，JavaSript 原始数据类型或者函数，observable 会抛出。如果想要为这样的值创建一个独立的可观察引用，请使用 Boxed Observable observable 代替。MobX 不会将一个有原型的对象自动转换成可观察的，因为这是它构造函数的职责。在构造函数中使用 extendObservable 或在类定义上使用 @observable / decorate 。

@observable

@observable 可以在实例字段和属性 getter 上使用。 对于对象的哪部分需要成为可观察的，@observable 提供了细粒度的控制。

import { observable, computed } from "mobx";

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

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

observable对象

observable.object(props, decorators?, options?)

如果把一个普通的 JavaScript 对象传递给 observable 方法，对象的所有属性都将被拷贝至一个克隆对象并将克隆对象转变成可观察的。 (普通对象是指不是使用构造函数创建出来的对象，而是以 Object 作为其原型，或者根本没有原型。) 默认情况下，observable 是递归应用的，所以如果对象的某个值是一个对象或数组，那么该值也将通过 observable 传递。

import {observable, autorun, action} from "mobx";

var person = observable({
    // observable 属性:
    name: "John",
    age: 42,
    showAge: false,

    // 计算属性:
    get labelText() {
        return this.showAge ? `${this.name} (age: ${this.age})` : this.name;
    },

    // 动作:
    setAge(age) {
        this.age = age;
    }
}, {
    setAge: action
});

// 对象属性没有暴露 'observe' 方法,
// 但不用担心, 'mobx.autorun' 功能更加强大
autorun(() => console.log(person.labelText));

person.name = "Da