Mobx特别容易入门级教程

Mobx是简单、可扩展的状态管理，React 和 MobX 是一对强力组合。React 经过提供机制把应用状态转换为可渲染组件树并对其进行渲染。而MobX提供机制来存储和更新应用状态供 React 使用。

若是你在此以前学习过Vuex，那么不要以为Mobx很是的难学，其实也是很是简单的。你会很快的上手入门。

本篇文章只是一个简单的Mobx入门，他包含了本人的一些理解，若是有不对的请斧正。看完本篇文章你再看文档就不是一头雾水了。

Mobx中文文档

咱们现来看一下Mobx的机制。

首先从左往右看，事件触发了Actions，Actions做为惟一修改State的方式，修改了State，State的修改更新了计算值Computed，计算值的改变引发了Reactions的改变，致使了UI的改变，Reactions能够通过事件调用Actions。

大致的机制就是这样。

开发环境

废话很少说，工先善其事必先利其器，咱们先把开发环境装好。请跟着我一步一步的来。

• 建立项目

在此以前你须要先下载好React脚手架.

create-react-app mobxlearn --scripts-version=react-scripts-ts
// 在这里先配置Ts的开发环境,若是你不了解TS，请先看个人专栏，有TS教程
复制代码

个人TS教程

• 安装依赖

npm install --save-dev babel-plugin-transform-decorators-legacy
// 修饰符的插件

npm install @babel/plugin-proposal-decorators
// 装饰器的一个插件
复制代码

• .babelrc

在根目录建立一个.babelrc文件.输入一下：

{
    "plugins":[
        [
          "@babel/plugin-proposal-decorators",
          {
              "legacy":true
          }
        ],
        [
          "@babel/plugin-proposal-class-properties",
          {
              "loose":true
          }
          ]
          ],
    "presets":[
        "react-app"
        ]
    
}
复制代码

• 安转Mobx和Mobx-react

npm install mobx mobx-react --save
复制代码

开发环境到此结束。

书写Mobx

• 目录结构

  

• App.tsx

import { Provider } from "mobx-react"
import * as React from 'react';
import './App.css';
import Casual from "./component/Casual"
import Store from './store/store';

const store = {
  store: new Store()
}

class App extends React.Component {
  // 在这里咱们要使用mobx-react里的Provider，
  // 把全部的state注入Provider中，后面的子组件均可以使用@inject("想要使用的state")注入被观察者。
  public render() {
    return (
      <Provider {...store}>
      <div>
        <Casual  />
      </div>
      </Provider>
    );
  }
}

export default App;
复制代码

• store.ts

import { action, computed, observable } from "mobx"

class Store {
    // 被观察者，你能够理解成Vuex中的State，也就是说，声明一些想要观察的状态，变量。
    // 被观察者能够是：JS基本数据类型、引用类型、普通对象、类实例、数组和映射
    @observable public num: number = 0;
    @observable public map: Map<string,object> = new Map();
    @observable public list: string[] = ["a","b"];
    @observable public obj: object = {name:"Mobx"};
    
    // 计算值是能够根据现有的状态或其它计算值衍生出的值.
    // 计算值不接受参数
    @computed
    public get retunum() {
        return `${this.num}~~~~~~~~`
    }
    
    @computed
    public get addNum() {
        return this.num + 10;
    }
    
    // 使用@action 更改被观察者
    @action.bound
    public add() {
        this.num++;
    }
    

}
export default Store
复制代码

• Casual.tsx

import {  inject, observer } from 'mobx-react';
import * as React from "react"
import Store from '../store/store';

// props要接受的值
interface IProps {
    store?: Store;
  }

@inject("store") // 将store注入
@observer   // 将Casual类转化为观察者，只要被观察者跟新，组件将会刷新
class Casual extends React.Component<IProps,{}> {

    constructor(props:IProps) {
        super(props)
    }


   public render() {
        return (
            <div>
                <h1>{this.props.store!.num}</h1>
                <h2>{this.props.store!.retunum}</h2>
                <h2>{this.props.store!.addNum}</h2>
                <button onClick={this.onClickAdd}>增长num</button>
            </div>
        )
    }

    public onClickAdd=()=>{
        this.props.store!.add()
    };


}
export default Casual
复制代码

Mobx入门到这里结束了，本文很是的简单，但愿能够可以帮助到你！未通过本人容许，不可转载此文！