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

2023-09-27 10:22:34

一、`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

码农公寓

一、MOBX的认识