摘要：一其實是一個比較輕便的可擴展的狀態管理工具，是一個由以及一些其他團隊的人共同維護的開源項目。當應用公共狀態的組件在狀態發生變化的時候，會自動完成與狀態相關的所有事情，例如自動更新自動緩存數據，自動通知等。

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組件和應用狀態同步化來減少不必要的狀態來更新組件的

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的數據驅動解構：
    action--(update)-->state--(update)-->computed--(trigger)-->reaction
    
MobX與decorater語法結合(注解形式@)結合起來用比較優雅，也算是MobX的一大亮點吧！

是被觀察著和觀察者的概念，你也可以理解為生產者和消費者的概念
@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
 
 例如我需要對數組進行篩選：
 @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(" ");
  }

然后在組件內進行調用：
{this.props.store.computedNumbers}

二、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，但是一般這種情況比較少

比起官方說的“動作”，我更愿意稱為是“行為”，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;
   })
}

這個函數類似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()}`;
 };


  測試autorun
  開始
  
{this.myname}

 只要firstname和lastname發生變化都會更新dom

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

Reaction是在初次數據變化后才會觸發

是mobx-react包多帶帶提供的

Observer是用來將React組建轉變成響應式的組件，內部通過mobx.autorun包裝了組件的
render函數，來確保store的數據更新時來刷新組件

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

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

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

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

使用：

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


    ...

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

mobx-react新增的生命周期鉤子，當組件重新render的時候會被觸發，但在初始渲染前是不會被觸發的

mobx-react提供的錯誤鉤子函數來收集錯誤

用法： 

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