Skip to content
react in mobx basic Course
JavaScript HTML CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
config
img
public
scripts
src
.gitignore
README.md
package.json

README.md

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

之前写过一篇redux的教程 可以参考redux的教程

本篇讲通过通俗易懂的方式让你快速上手mobx 的基本使用,虽然已经可以满足大部分开发中的需求但是详细 请参考中文官方文档

本篇配教程代码 https://github.com/Chad97/mobx-basic

如果对想要快速入门的你有所帮助请给点个小小的start吧~

概述

  1. 本篇采用的是mobx5 和react 16.8, 均才用最新版本库所做示范在有的API和其他版本可能有所差异,如严格模式
  2. 本篇纯属原创 转载请注明出处

我们先来简单的看下官网的介绍

MobX 是一个经过战火洗礼的库,它通过透明的函数响应式编程(transparently applying functional reactive programming - TFRP)使得状态管理变得简单和可扩展。MobX背后的哲学很简单:

其实你可以简单的理解成 mobx是一个excel的计算表格 mobx

你将要了解到:

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

准备工作

因为本篇通篇使用ES7中的修饰器语法@,所以需要配置bable,推荐使用 当然你也可以使用 decorators 为参考

  1. 安装 yarn add mobx mobx-react

  2. 启用修饰器 babel 支持ES7中的修饰器语法@

    • yarn eject 打开配置
    • 安装babel 依赖 yarn add babel-plugin-transform-decorators-legacy --dev yarn add @babel/plugin-proposal-decorators
  3. 配置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
  • props 接收 父组件传过来的 newState

当然如果你的组件签到太深,觉得 上面2中方式太麻烦你也可以使用 react Context来传递 newState,这里就不多做概述,具体参考

运行机制

贴一张官方的图 mobx-flow 可以发现 对比redux mobx 的方式人更容易理解是使用 面向对象的方式也让人用起来 不用写许多许多 render 感觉恶心

redux教程链接 https://blog.csdn.net/Chad97/article/details/89522403

最后 大家可以 clone 我的deom 教程作为参考哦~ https://github.com/Chad97/mobx-basic

喜欢的 大爷点个star 哦~

You can’t perform that action at this time.