首页 > 其他分享> 文章详细

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

2021-06-15 16:54:48 阅读：251 来源： 互联网

标签：observable mobx react MOBX 开发具体 props import export

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

这里写图片描述

标签：observable,mobx,react,MOBX,开发,具体,props,import,export
来源： https://blog.51cto.com/u_3409716/2904714

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9