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

以前写过一篇redux的教程 能够参考redux的教程

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

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

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

概述

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

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

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

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

你将要了解到：

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，这里就很少作概述，具体参考

运行机制

贴一张官方的图

能够发现 对比redux mobx 的方式人更容易理解是使用 面向对象的方式也让人用起来 不用写许多许多 render 感受恶心

redux教程连接 juejin.im/post/5cc1ac…

最后 你们能够 clone 个人deom 教程做为参考哦~ github.com/Chad97/mobx… 喜欢的 大爷点个star 哦~