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-devnpm install babel-preset-react-native-stage-0 --save-devnpm 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")@observerexport 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