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入門到這裏結束了，本文很是的簡單，但願能夠可以幫助到你！未通過本人容許，不可轉載此文！