mobx-basic

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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
"babel": {
"plugins": [
[
"@babel/plugin-proposal-decorators",
{
"legacy": true
}
],
[
"@babel/plugin-proposal-class-properties",
{
"loose": true
}
]
],
"presets": [
"react-app"
]
}

start


实例化对象容器

在全局文件下创建一个state.js ps 别问我为啥不叫store 因为我喜欢
如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
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

1
2
3
4
5
6
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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 哦~

本网站作品部分来自于网络,感谢开源社区的诸多开发者 My_Github and My_E-mail

Copyright © 2013 - 2019 Ruoduan's Blog All Rights Reserved.

滇ICP备19003866号 本网站版权归本站作者Ruoduan所有

访客数 : | 访问量 :

{% if theme.fireworks %} {% endif %} {% if theme.canvas_nest %} {% endif %} {% if theme.Background_music %} {% endif %}