一、MobX

MobX现实上是一个比较轻巧的可扩大的状况治理东西，是一个由Facebook以及一些其他团队的人配合保护的开源项目。

当运用大众状况的组件在状况发作变化的时刻，会自动完成与状况相干的一切事变，比方自动更新View,自动缓存数据，自动关照server等。
比方React的系统，react + redux + react-redux + redux-saga, view层触发一个action，中间件会将这个行动举行dispatch，然后reducer实行相应的更新状况要领，使得store的状况更新。

MobX官方引荐与React搭配运用，来存储和更新运用状况，所以最好搭配mobx-react中间件运用：
道理：
1、React的render是将存储的状况转化为树状构造来衬着组件的要领；
   Mobx是用来存储和更新状况的东西；
2、React运用的要领是采纳假造Dom来举行view视图的缓存，来削减烦琐的Dom更新
   而Mobx则经由过程一个假造的状况依靠图表来让react组件和运用状况同步化来削减不必要的状况来更新组件的

二、MobX与其他状况治理东西的区分

1、对照Redux
  conponent-->dispatch(action)-->reducer-->subscribe-->getState-->component
  对照React-Redux
  component-->actionCreator(data)-->reducer-->component
这里的reducer在MobX里都给了action，直接经由过程action来变动状况，不须要reducer来操纵state了，也不需关注reducer纯不纯了

2、对照Vuex
component-->dispatch(action)-->mutation--(mutate)-->state-->component
vuex中提出了同步mutation和异步action，如今mobx也无需mutaiton，但自创了computed这个纯函数。

比拟这两个东西，MobX内置了数据变化监听机制，使得在现实运用的时刻一切都是那末的顺其自然。

三、MobX中心模块

MobX的数据驱动解构：
    action--(update)-->state--(update)-->computed--(trigger)-->reaction
    
MobX与decorater语法连系(注解情势@)连系起来用比较文雅，也算是MobX的一大亮点吧！

Observable

是被视察着和视察者的观点，你也能够理解为生产者和消费者的观点
@observable/Observable 要领将对象的一切属性从新克隆成新对象，并将克隆对象转变成可视察的。
@observer就是在你定阅视察的对象的处所增加解释来监听对象的更新

Observable 要领的值能够是以下范例：

1、object(原型是Object): Observable要领将该对象克隆成新对象并将属性转变成可视察的；
然则后增加的属性不会变成可视察的，须要用到set或许extendObservable；

    eg: 
    @observable car = {color: red; name: 'Infinity'}
    
    注：这也现实上是extendObservable(this,{ car: {color: red; name: 'Infinity'} })的语法糖
    向对象中增加属性：
    extendObservable(car, {price: '300w'})

2、Array：Observable会建立一个类数组对象来替代真正的数组，而且支撑一切的原生要领，
然则sort和reverse有所不同，这里的被视察的数组对象的这两个要领，是不会转变数组本身，而是一个拷贝的数组；

3、Es6的Map：建立一个动态建的observable映照，能够对特定项的变动做出回响反映等；会返回一个新的Observable Map

4、object(有本身的原型对象)：这类状况须要运用observable.box(value)来治理如许的值
经由过程box这个箱子来存这些值，并运用.get()用来猎取当前值，采纳.set(newValue)来更新值。

    eg:
    const carName = observable.box('Infinity');
    console.log(carName.get());
    carName.set('ofo');

Computed

 是在定义相干的一些数据发作变化的时刻自动更新的值，经由过程@computed来润饰运用；
 注重：computed润饰的是一个状况，状况不能反复声明，只需介入盘算的值发作转变才会触发computed
 
 比方我须要对数组举行挑选：
 @observable numbersArr = [99, 80, 79, 68, 2, 43, 1, 23];

一、getter
eg:
 // 挑选数组中乘2并大于50的数
  @computed get computedNumbers() {
    return this.numbersArr.filter((item) => {
      return item * 2 > 50;
    }).join(' ');
  }

然后在组件内举行挪用：
<div>{this.props.store.computedNumbers}</div>

二、setter

set computedBumbers(value) {
    this.numbersArr = [99, 80, 79, 68, 2, 43, 1, 23];
}

// set体式格局能够使得数据举行逆推导 将数据根据既定的体式格局举行回复
eg:
  @observable length = 2;
  @computed get squared() {
    return this.length * this.length;
  }
  set squared(value) {
    this.length = Math.sqrt(value);
  }

注：这与autorun还有点区分，假如有一个函数应当自动运转(比方只是为了到达某种结果/功用)，但不会发生一个新的值，那就运用autorun，然则平常这类状况比较少

Action

比起官方说的“行动”，我更情愿称为是“行动”，mobx的action吸收了redux和vuex的数据处置惩罚的庞杂逻辑
用来修正状况，不同于Computed

eg:
component:
sendInfo = () => {
    const username = this.name.value;
    const pwd = this.pwd.value;

    if (!username || !pwd) {
      return;
    }

    // 调接口
    this.props.testDecStore.handleGetUserInfo();
  };

store:
// 四、异步数据猎取
@action handleGetUserInfo() {
    this.sendCount++;
    testDecService.getUserInfo().then((data) => {
      this.userInfo = data;
   })
}

Autorun

这个函数相似computed，是经由过程对状况的更新做出回响反映，然则不同于computed。

computed建立的函数，是有本身的视察者的，而autorun是只需它的依靠关联转变时才会从新盘算，
不然它的值被认为是不相干的。正如官方所说是比较合适log打印日记，耐久化更新UI的代码，而不是用来发生新的值

吸收的参数：
1，对象，
2、delay: 函数耽误实行时间，比方节流去抖
3、name: 
4、onError: 用来处置惩罚reaction的毛病
5、scheduler: 设置自定义调理器以决议怎样调理autorun函数的从新运转

eg:
autorun(() => {
    // do something
}, {
    onError(e) {
        alert('error')
    }
})


实例：
autorun(() => {
  this.myname = `my name is ${this.firstName} ${this.lastName}`;
});

changeName = () => {
    this.firstName = `Alice${new Date().getTime()}`;
    this.lastName = `Thomas${new Date().getTime()}`;
 };

<div className="tips" >
  测试autorun
  <span className="btn-span" onClick={this.changeName}>最先</span>
  <div>{this.myname}</div>
</div>
 只需firstname和lastname发作变化都邑更新dom

然则，假如仅仅想要在被视察的变量有变化的时刻触发，而不是马上实行autorun，那末我们能够用到reaction了；

Reaction

Reaction是在首次数据变化后才会触发

四、Mobx-react中心观点

Observer

是mobx-react包零丁供应的

Observer是用来将React组建转变成相应式的组件，内部经由过程mobx.autorun包装了组件的
render函数，来确保store的数据更新时来革新组件

@observer 是observer(class ***{})的注解情势，用来视察组件，
高阶组件 @observer class Test extends React.Component{}
无状况组件 const Test = observer(() => <div>test</div>)

运用inject组件衔接供应的sotres,他会使得stores能够作为组件的props挪用
eg:
@inject('testStore')
@observer class Test extends React.Component{} 

Provider

Provider函数为connect函数供应store参数，本身connect函数就是用来衔接视图和数据层的要领。

在跟组件外层包一层provider，使得一切的子组件默许都能够拿到state

运用：

import { Provider } from 'mobx-react';
import store from '../stores';

<Provider {...store}>
    ...
</Provider>

inject

引入数据的体式格局，@inject(stores); 使得数据被自动保存在组件的this.props中

componentWillReact

mobx-react新增的生命周期钩子，当组件从新render的时刻会被触发，但在初始衬着前是不会被触发的

onError

mobx-react供应的毛病钩子函数来网络毛病

用法： 

import { onError } from 'mobx-react';
onError((error) => {
    consol.log(error);
})

五、MobX源码解读

六、MobX运用注重