MOBX在项目开发中的具体使用

一、MOBX的认识

• 1、mobx是react或者reactNative开发过程中进行状态管理的一个状态机,类似redux和vuex一样的,中文官方文档,相对于redux或者vuex简单直白,mobx使用的是ES7的装饰器,因此需要配置下。
• 2、所谓的状态机,不管是redux、mobx、vuex都是采用观察者模式来开发的,可以简单的把状态机(状态)理解为项目中的全局变量,只是这个全局变量采用指定的方式方法才能获取与修改。
• 3、状态机存储在浏览器的内存中,类似浏览器自带的sessionStore的存储方式存在。

二、环境的配置

• 1、使用create-react-app构建一个项目,传送门

• 2、配置.babelrc支持ES7的语法,更多信息请参考

  • 1、安装包

    npm run eject # 运行命令
    npm install babel-preset-stage-2 --save-dev
    npm install babel-preset-react-native-stage-0 --save-dev
    npm install --save mobx mobx-react

  • 2、配置.babelrc

    {
      "presets": ["react-native-stage-0/decorator-support"]
    }

三、简单的使用一个状态

• 1、定义状态

  import { observable, action } from 'mobx';
  // 定义一个观察的对象
  let appState = observable({
    timer: 10
  })
  
  // 定义action(动作)
  appState.resetTimer = action(() => {
    appState.timer = 0;
  }); 
  export default appState;

• 2、通过属性传递到子组件中

  <div>
      <MobxTest appState={appState}/>
  </div>

• 3、在组件中直接可以通过props获取到属性与方法

四、在大型项目中定义多个状态

• 1、单独创建一个目录存放项目中所有的状态(一般取名store)

• 2、定义第一个状态

  import { observable, action } from "mobx";
  export default class Timer {
    @observable
    mytimer = {
      timer: 10
    };
  
    @action
    resetTime() {
      console.log("hello word");
      this.mytimer.timer = 0;
    }
  }

• 3、定义第二个状态

  import { observable, computed, action } from "mobx";
  
  class OrderLine {
    @observable price = 0;
    @observable amount = 1;
    // 计算属性  
    @computed
    get total() {
      return this.price * this.amount;
    }
  
    @observable length = 2;
    @computed
    get squared() {
      return this.length * this.length;
    }
    set squared(value) {
      // 这是一个自己的动作，不需要注解
      this.length = Math.pow(2, value);
    }
  
    @action.bound
    resize() {
      this.price++;
    }
  }
  
  export default OrderLine;

• 4、在index.js中汇总

  import OrderLine from "./OrderLine";
  import Timer from "./timer";
  class Stores {
    constructor() {
      this.orderLine = new OrderLine();
      this.timer = new Timer();
    }
  }
  
  export default new Stores();

• 5、类似redux,MOBX也有mobx-react实现mobx与react的链接(直接在根组件中使用)

  import React, { Component } from "react";
  import MobxTest from "./components/MobxTest01";
  import stores from "./store/";
  import { Provider } from "mobx-react";
  
  class App extends Component {
    render() {
      const { ...storesArray } = stores;
      return (
        <Provider {...storesArray}>
          <MobxTest />
        </Provider>
      );
    }
  }
  
  export default App;

• 6、在别的组件中使用注解的方式使用

  说明,注解中使用的是在汇总中实例的对象,这样就实现了观察需要观察的,不想观察的就不观察

  import React, { Component } from "react";
  // 引入观察者
  import { observer, inject } from "mobx-react";
  import { observable } from "mobx";
  
  @inject("orderLine")
  @observer
  export class MobxTest extends Component {
    @observable secondsPassed = 0;
    constructor(props) {
      super(props);
      this.state = {};
    }
    render() {
      console.log(this.props);
      console.log(this.props.orderLine.amount);
      return (
        <div>
          <p>{this.props.orderLine.total}</p>
          <p>{this.secondsPassed}</p>
          <button onClick={this.onReset.bind(this)}>按钮</button>
        </div>
      );
    }
    componentWillReact() {
      console.log("componentWillReact方法");
    }
    componentWillMount() {
      console.log("componentWillMount方法");
    }
    onReset() {
      this.props.orderLine.resize();
    }
  }
  
  export default MobxTest;

五、代码下载

---

欢迎加入群聊，我们一起探讨前端技术栈

群号:560285778