Mobx-basic(快速上手)莞式教程

時間 2019-11-08

標籤 mobx basic 快速上手教程简体版

原文原文鏈接

以前寫過一篇redux的教程能夠參考redux的教程html

本篇講經過通俗易懂的方式讓你快速上手mobx 的基本使用，雖然已經能夠知足大部分開發中的需求可是詳細請參考中文官方文檔react

本篇配教程代碼 github.com/Chad97/mobx…webpack

若是對想要快速入門的你有所幫助請給點個小小的start吧~git

概述

本篇採用的是mobx5 和react 16.8, 均才用最新版本庫所作示範在有的API和其餘版本可能有所差別，如嚴格模式
本篇純屬原創轉載請註明出處

咱們先來簡單的看下官網的介紹github

MobX 是一個通過戰火洗禮的庫，它經過透明的函數響應式編程(transparently applying functional reactive programming - TFRP)使得狀態管理變得簡單和可擴展。MobX背後的哲學很簡單:web

其實你能夠簡單的理解成 mobx是一個excel的計算表格編程

你將要了解到：

observable, autorun, computed, action, configure —— mobx observer —— mobx-reactjson

準備工做

由於本篇通篇使用ES7中的修飾器語法@，因此須要配置bable，推薦使用固然你也可使用 decorators 爲參考redux

安裝 yarn add mobx mobx-reactbabel
啓用修飾器 babel 支持ES7中的修飾器語法@
- yarn eject 打開配置
- 安裝babel 依賴 yarn add babel-plugin-transform-decorators-legacy --dev yarn add @babel/plugin-proposal-decorators
配置webpack

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

start

實例化對象容器

在全局文件下建立一個state.js ps 別問我爲啥不叫store 由於我喜歡以下

import { observable, autorun, computed, action, configure} from "mobx"
configure(true)//開啓嚴格模式

class MyState {
    @observable num1 = 0;
    @observable num2 = 100;
  
    @action addNum1 = () => {
      this.num1 ++;
    }

    @action addNum2 = () => {
      this.num2 ++;
    }

    @action empty = () => {
        this.num1 = 0
        this.num2 = 0
    }

    @computed get total() {
      return this.num1 + this.num2;
    }
  }

  const newState = new MyState();

export default newState 

複製代碼

咱們能夠看到咱們使用 observable 觀察了 num1 和 num2
寫了三個觸發行爲 action 分別是 addNum1 addNum2 empty
一個計算 computed total
而後實例化一個對象 newState 而且導出了

若是你用過redux 那這裏對應你來講簡直不要太簡單，只不過mobx 更加面向對象

組件中觸發狀態

建立一個父組件 Mobx.jsx

import React from 'react';
import { observer } from 'mobx-react';

import newState from './state'

import AllNum from './child/AllNum'
import Main from './child/Main'


@observer
class Mobx extends React.Component {
    constructor(props) {
        super(props);
        this.state = { 

         };
    }

    render() {
        return (
            <> 
                <AllNum store={newState} />
                <br /><hr />
                <Main store={newState} />
                <br /><hr />
                <button onClick={newState.empty}>清零</button>
            </>
        );
    }
}

export default Mobx;
複製代碼

咱們能夠看到這裏導入了 newState 經過 empty 觸發 action
而子組件經過 props把 newState 傳遞過去了

2個子組件

AllNum.jsx

import React from 'react';
import { observer } from "mobx-react"

const AllNum = observer((props) => <div>num1 + num2 = {props.store.total}</div>);

export default AllNum
複製代碼

Main.jsx

import React from 'react';
import { observer } from 'mobx-react';

const Main = observer((props) => (
    <div> <p>num1 = {props.store.num1}</p> <p>num2 = {props.store.num2}</p> <div> <button style={{marginRight:'5em'}} onClick={props.store.addNum1}>num1 + 1</button> <button onClick={props.store.addNum2}>num2 + 1</button> </div> </div>
  ));

export default Main
複製代碼