摘要：一其實(shí)是一個(gè)比較輕便的可擴(kuò)展的狀態(tài)管理工具，是一個(gè)由以及一些其他團(tuán)隊(duì)的人共同維護(hù)的開源項(xiàng)目。當(dāng)應(yīng)用公共狀態(tài)的組件在狀態(tài)發(fā)生變化的時(shí)候，會(huì)自動(dòng)完成與狀態(tài)相關(guān)的所有事情，例如自動(dòng)更新自動(dòng)緩存數(shù)據(jù)，自動(dòng)通知等。

MobX其實(shí)是一個(gè)比較輕便的可擴(kuò)展的狀態(tài)管理工具，是一個(gè)由Facebook以及一些其他團(tuán)隊(duì)的人共同維護(hù)的開源項(xiàng)目。

當(dāng)應(yīng)用公共狀態(tài)的組件在狀態(tài)發(fā)生變化的時(shí)候，會(huì)自動(dòng)完成與狀態(tài)相關(guān)的所有事情，例如自動(dòng)更新View,自動(dòng)緩存數(shù)據(jù)，自動(dòng)通知server等。
例如React的體系，react + redux + react-redux + redux-saga, view層觸發(fā)一個(gè)action，中間件會(huì)將這個(gè)動(dòng)作進(jìn)行dispatch，然后reducer執(zhí)行相應(yīng)的更新狀態(tài)方法，使得store的狀態(tài)更新。

MobX官方推薦與React搭配使用，來存儲(chǔ)和更新應(yīng)用狀態(tài)，所以最好搭配mobx-react中間件使用：
原理：
1、React的render是將存儲(chǔ)的狀態(tài)轉(zhuǎn)化為樹狀結(jié)構(gòu)來渲染組件的方法；
   Mobx是用來存儲(chǔ)和更新狀態(tài)的工具；
2、React使用的方法是采用虛擬Dom來進(jìn)行view視圖的緩存，來減少繁瑣的Dom更新
   而Mobx則通過一個(gè)虛擬的狀態(tài)依賴圖表來讓react組件和應(yīng)用狀態(tài)同步化來減少不必要的狀態(tài)來更新組件的

1、對比Redux
  conponent-->dispatch(action)-->reducer-->subscribe-->getState-->component
  對比React-Redux
  component-->actionCreator(data)-->reducer-->component
這里的reducer在MobX里都給了action，直接通過action來更改狀態(tài)，不需要reducer來操作state了，也不需關(guān)注reducer純不純了

2、對比Vuex
component-->dispatch(action)-->mutation--(mutate)-->state-->component
vuex中提出了同步mutation和異步action，現(xiàn)在mobx也無需mutaiton，但借鑒了computed這個(gè)純函數(shù)。

相比這兩個(gè)工具，MobX內(nèi)置了數(shù)據(jù)變化監(jiān)聽機(jī)制，使得在實(shí)際應(yīng)用的時(shí)候一切都是那么的順其自然。

MobX的數(shù)據(jù)驅(qū)動(dòng)解構(gòu)：
    action--(update)-->state--(update)-->computed--(trigger)-->reaction
    
MobX與decorater語法結(jié)合(注解形式@)結(jié)合起來用比較優(yōu)雅，也算是MobX的一大亮點(diǎn)吧！

是被觀察著和觀察者的概念，你也可以理解為生產(chǎn)者和消費(fèi)者的概念
@observable/Observable 方法將對象的所有屬性重新克隆成新對象，并將克隆對象轉(zhuǎn)變成可觀察的。
@observer就是在你訂閱觀察的對象的地方添加注釋來監(jiān)聽對象的更新

Observable 方法的值可以是如下類型：

1、object(原型是Object): Observable方法將該對象克隆成新對象并將屬性轉(zhuǎn)變成可觀察的；
但是后添加的屬性不會(huì)變?yōu)榭捎^察的，需要用到set或者extendObservable；

    eg: 
    @observable car = {color: red; name: "Infinity"}
    
    注：這也其實(shí)是extendObservable(this,{ car: {color: red; name: "Infinity"} })的語法糖
    向?qū)ο笾刑砑訉傩裕?    extendObservable(car, {price: "300w"})

2、Array：Observable會(huì)創(chuàng)建一個(gè)類數(shù)組對象來代替真正的數(shù)組，并且支持所有的原生方法，
但是sort和reverse有所不同，這里的被觀察的數(shù)組對象的這兩個(gè)方法，是不會(huì)改變數(shù)組本身，而是一個(gè)拷貝的數(shù)組；

3、Es6的Map：創(chuàng)建一個(gè)動(dòng)態(tài)建的observable映射，可以對特定項(xiàng)的更改做出反應(yīng)等；會(huì)返回一個(gè)新的Observable Map

4、object(有自身的原型對象)：這種情況需要使用observable.box(value)來管理這樣的值
通過box這個(gè)箱子來存這些值，并使用.get()用來獲取當(dāng)前值，采用.set(newValue)來更新值。

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

 是在定義相關(guān)的一些數(shù)據(jù)發(fā)生變化的時(shí)候自動(dòng)更新的值，通過@computed來修飾使用；
 注意：computed修飾的是一個(gè)狀態(tài)，狀態(tài)不能重復(fù)聲明，只有參與計(jì)算的值發(fā)生改變才會(huì)觸發(fā)computed
 
 例如我需要對數(shù)組進(jìn)行篩選：
 @observable numbersArr = [99, 80, 79, 68, 2, 43, 1, 23];

一、getter
eg:
 // 篩選數(shù)組中乘2并大于50的數(shù)
  @computed get computedNumbers() {
    return this.numbersArr.filter((item) => {
      return item * 2 > 50;
    }).join(" ");
  }

然后在組件內(nèi)進(jìn)行調(diào)用：
{this.props.store.computedNumbers}

二、setter

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

// set方式可以使得數(shù)據(jù)進(jìn)行逆推導(dǎo) 將數(shù)據(jù)按照既定的方式進(jìn)行復(fù)原
eg:
  @observable length = 2;
  @computed get squared() {
    return this.length * this.length;
  }
  set squared(value) {
    this.length = Math.sqrt(value);
  }

注：這與autorun還有點(diǎn)區(qū)別，如果有一個(gè)函數(shù)應(yīng)該自動(dòng)運(yùn)行(例如只是為了達(dá)到某種效果/功能)，但不會(huì)產(chǎn)生一個(gè)新的值，那就使用autorun，但是一般這種情況比較少

比起官方說的“動(dòng)作”，我更愿意稱為是“行為”，mobx的action吸收了redux和vuex的數(shù)據(jù)處理的復(fù)雜邏輯
用來修改狀態(tài)，不同于Computed

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

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

    // 調(diào)接口
    this.props.testDecStore.handleGetUserInfo();
  };

store:
// 四、異步數(shù)據(jù)獲取
@action handleGetUserInfo() {
    this.sendCount++;
    testDecService.getUserInfo().then((data) => {
      this.userInfo = data;
   })
}

這個(gè)函數(shù)類似computed，是通過對狀態(tài)的更新做出反應(yīng)，但是不同于computed。

computed創(chuàng)建的函數(shù)，是有自己的觀察者的，而autorun是只有它的依賴關(guān)系改變時(shí)才會(huì)重新計(jì)算，
否則它的值被認(rèn)為是不相干的。正如官方所說是比較適合log打印日志，持久化更新UI的代碼，而不是用來產(chǎn)生新的值

接收的參數(shù)：
1，對象，
2、delay: 函數(shù)延遲執(zhí)行時(shí)間，例如節(jié)流去抖
3、name: 
4、onError: 用來處理reaction的錯(cuò)誤
5、scheduler: 設(shè)置自定義調(diào)度器以決定如何調(diào)度autorun函數(shù)的重新運(yùn)行

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


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

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


  測試autorun
  開始
  
{this.myname}

 只要firstname和lastname發(fā)生變化都會(huì)更新dom

但是，如果僅僅想要在被觀察的變量有變化的時(shí)候觸發(fā)，而不是立即執(zhí)行autorun，那么我們可以用到reaction了；

Reaction是在初次數(shù)據(jù)變化后才會(huì)觸發(fā)

是mobx-react包多帶帶提供的

Observer是用來將React組建轉(zhuǎn)變成響應(yīng)式的組件，內(nèi)部通過mobx.autorun包裝了組件的
render函數(shù)，來確保store的數(shù)據(jù)更新時(shí)來刷新組件

@observer 是observer(class ***{})的注解形式，用來觀察組件，
高階組件 @observer class Test extends React.Component{}
無狀態(tài)組件 const Test = observer(() => 
test
)

使用inject組件連接提供的sotres,他會(huì)使得stores可以作為組件的props調(diào)用
eg:
@inject("testStore")
@observer class Test extends React.Component{} 

Provider函數(shù)為connect函數(shù)提供store參數(shù)，本身connect函數(shù)就是用來連接視圖和數(shù)據(jù)層的方法。

在跟組件外層包一層provider，使得所有的子組件默認(rèn)都可以拿到state

使用：

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


    ...

引入數(shù)據(jù)的方式，@inject(stores); 使得數(shù)據(jù)被自動(dòng)保存在組件的this.props中

mobx-react新增的生命周期鉤子，當(dāng)組件重新render的時(shí)候會(huì)被觸發(fā)，但在初始渲染前是不會(huì)被觸發(fā)的

mobx-react提供的錯(cuò)誤鉤子函數(shù)來收集錯(cuò)誤

用法： 

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