阅读 3397

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入门到这里结束了,本文非常的简单,希望可以能够帮助到你!未经过本人允许,不可转载此文!

关注下面的标签,发现更多相似文章
评论