学習の旅

一、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(' ');
  }

          ：
{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

しかし、観察された変数に変化があるときだけ触発したいならば、autrunを直ちに実行するのではなく、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(() => 
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

       ，@inject(stores);              this.props 

component WillReact

mobx-react         ，     render       ，              

オンエルローr

mobx-react              

  ： 

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

五、MobXソースコードの解読
六、MobXの使用注意