react-Mobx基本使用

十分钟交互式的 MobX + React 教程

mobx 的核心理念是 简单、可扩展的状态管理库。比redux和react-redux方便许多

先create-react-app 构建一个项目

1.装包

1.1安装mobx mobx-react

  npm install  mobx mobx-react -S

1.2安装装饰器装包搭配依赖去解析(可选),装饰器作用>代码更简洁

  npm i --save-dev babel-plugin-transform-decorators-legacy

1.3装完依赖,然后json 文件中配置启用,现在采用的是babel7所以要这样配置,也可以单独在.babelrc文件中配置。2者不能冲突，选其一

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

2.项目应用

2.1一般先在src创建个store文件夹(定义状态和创建实例)

2.2定义状态并使其可观察(状态可以自定义创建)

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;

2.3 在store目录创建index.js (创建仓库实例)

import OrderLine from "./OrderLine";

class Stores {
    constructor() {
        this.orderLine = new OrderLine();  //每次创建的状态在这里注入
    }
}

export default new Stores();

2.4 类似react-redux一样,MOBX也有mobx-react实现mobx与react的链接,所以在根组件中使用注入这个仓库。

import React, { Component } from "react";
import MobxTest from "./Components/Mobox/MobxTset01";
import stores from "./Components/Mobox/store";
import { Provider } from "mobx-react";

class App extends Component {
    render() {
        return (
            
                
            
        );
    }
}

export default App;

2.5 创建视图以响应状态的变化，在别的组件中使用注解的方式使用

import React, { Component } from "react";
import { observer, inject } from "mobx-react";
import { observable } from "mobx";

//@inject() 将组件链接到 stores,以props的形式传递给目标组件
@inject("orderLine")
@observer  //观察者
class MobxTest extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  componentWillMount() {
    console.log("componentWillMount方法");
  }
  onReset() {
    this.props.orderLine.resize(); //状态中定义的方法从而改变仓库中的值
  }

  render() {
    //通过发现仓库中定义的值,和方法都可以通过props属性拿到注入orderLine所有属性和方法
    console.log(this.props,'this.props');
    console.log(this.props.orderLine.amount);
    return (
      

        
{this.props.orderLine.total}
        {/* 
{this.secondsPassed}
 */}
        
{this.props.orderLine.total}
        按钮
      
    );
  }
}

export default MobxTest;

效果图 :

Mobx官网传送门：https://cn.mobx.js.org/