mobX入门总结

reaxt的数据管理，除了redux之外，一个新的状态管理方案mobX

配置使项目支持修饰符@（修饰符概念）

安装插件

cnpm i --save-dev babel-plugin-transform-decorators-legacy
npm install --save-dev @babel/plugin-proposal-decorators
npm install --save-dev @babel/plugin-proposal-class-properties

配置package.json

+++
"babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      [
        "@babel/plugin-proposal-decorators",
        {
          "legacy": true
        }
      ],
      [
        "@babel/plugin-proposal-class-properties",
        {
          "loose": true
        }
      ]
    ]
  },

回顾修饰器

在 MobX 的使用中，使用 ES7 语法的 修饰器（Decorator） 将可以极大的简化组织代码，当然，如果使用 ES5 的语法也未尝不可，但是我这里还是强烈建议大家使用 修饰器

修饰器模式：我的理解----就是在函数外边套一层，包装一下这个函数，就是一个语法糖，本质就是一个函数。。。。
@decorator
class A {}

// 等同于
class A {}
A = decorator(A) || A;

核心概念

几个部分组成：Actions、State、Computed 、Reactions

在整个数据流中，通过事件驱动（UI 事件、网络请求…）触发 Actions，在 Actions 中修改了 State 中的值，这里的 State 既应用中的 store 树（存储数据），然后根据新的 State 中的数据计算出所需要的计算属性（computed values）值，最后响应（react）到 UI 视图层。
例子

const { observable, action, computed, autorun } = mobx;

class Store {//这个store类里边定义要监听的状态，计算函数，修改函数（很类似vuex）
  @observable list = []//监听list数组
  @computed get total() {//计算函数 使用的是get方法
    return this.list.length;
  }
  @action change () {//通过action来修改state状态，不用action也行，但是最好使用action修改，保证数据流有唯一的修改方式，不会造成混乱
    this.list.push(this.list.length);
  }
};
const mstore = new Store();//实例化state，包含类里边的所有的属性函数等

setInterval(() => {
  mstore.change();
}, 2000);

autorun(() => {//当mstore.total发生变化的时候会出发autorun的执行
  console.log(mstore.total);
});

@observable classProperty = value

• @observable 对这个value进行了深监听，就是他里边的每个属性或者数组的每一项改变的化都会监听的到，都会触发autorun的执行(@observable监听的state只要修改了<不是给store类增加新的监听对象>就会触发autorun的执行)
• 当定义好其 observable 的对象值后，store中后来添加的值是不会变为可观察的，这时需要使用 extendObservable 来扩展对象：

class Store {
    @observable oo;
    constructor(){
        this.oo={
            name:1
        };
    }
};
const mstore = new Store();
extendObservable(mstore, {//给mstore类增加了一个被监听的数据age
  age: 0,
});
var i = 1;
setInterval(() => {
    mstore.age = i++;
}, 2000);
autorun(() => {
    console.log(mstore.age);
});

action

@action，其规定对于 store 对象中所有可观察状态属性的改变都应该在 @action 中完成，它使代码可以组织的更好，并且对于数据改变的时机也更加清晰。

除了action，在 mobx 中，可以有很多种方式去修改 state，mobx 并不对其做限制；
但是如果使用了严格模式：

import { useStrict } from 'mobx';
useStrict(true);//这样state只能通过action修改

autorun

• autorun 接受一个函数作为参数，在使用 autorun 的时候，该函数会被立即调用一次，之后当该函数中依赖的可观察状态属性（或者计算属性）发生变化的时候，该函数会被调用，注意，该函数的调用取决的函数中使用了哪些可观察状态属性（或者计算属性）。
• autorun 中的函数就是用来操作 Reactions 的，当可观察状态属性的值发生改变的时候，可以在该函数中利用状态值来更新改变 UI 视图（记录日志、持久化），在 MobX 结合 React 的使用中，mobx-react 库则是封装了 autorun 用来在 store 中的可观察状态属性值发生改变的时候 rerender React 组件。

处理异步行为

class Store {
@ observable items;
constructor(){
  this.items=0//给个默认值
}
 async fetchData(pathname, id) {
    let { data } = await axios.get(
      `localhost:3000/${pathname}`
    );
     this.setData(data) ;
  }

  @action setData(data) {
    this.items = data;
  }
)

在 React 中使用 MobX---mobx-react

在 React 中使用 MobX 需要用到 mobx-react。
其提供了 Provider 组件用来包裹最外层组件节点，并且传入 store（通过）context 传递给后代组件：

import { Provider } from 'mobx-react';
const stores = {
  ...
};

ReactDOM.render((
  
    
  
), document.getElementById('root'));

使用 @inject 给组件注入其需要的 store（利用 React context 机制）；
通过 @observer 将 React 组件转化成响应式组件，它用 mobx.autorun 包装了组件的 render 函数以确保任何组件渲染中使用的数据变化时都可以强制刷新组件：

import React from 'react';
import { inject, observer } from 'mobx-react';

@inject('userStore', 'commonStore')//以来两个store
@observer
export default class App extends React.Component {

  componentWillMount() {
    if (this.props.commonStore.token) {
      this.props.userStore.pullUser().finally(() => this.props.commonStore.setAppLoaded());
    } else {
      this.props.commonStore.setAppLoaded();
    }
  }

  render() {
    if (this.props.commonStore.appLoaded) {
      return (
        

          ...
          {this.props.children}
        
      );
    }
    return (
      ...
    );
  }
}