Mobx介绍和使用

Mobx介绍

Mobx是一个可以和React良好配合的集中状态管理工具，mobx和react的关系相当于vuex和vue之间的关系，同类工具还有：redux、dva、recoil。

mobx优势：

1. 编写无模板的极简代码来精准描述你的意图；
2. 依赖自动追踪最小渲染优化轻松实现最优渲染；
3. 可移植和测试轻松实现架构自由；
4. 学习成本小且面向对象编程，对TS友好。

mobx的核心思想：任何源自应用状态的东西都应该自动的获得。

Mobx与Redux的区别

Redux：

1. 有严格的工作流程，需要写大量的模版代码
2. 需要保证数据不可变
3. Redux需要中间件处理异步
4. Redux约束强，更适合大型多人协作开发

Mobx：

1. 无模板代码，非常简洁
2. 数据是响应式的，可以直接修改数据
3. Mobx可以直接处理异步
4. Mobx适合简单，规模不大的应用

Mobx安装

安装 mobx 和 mobx-react或mobx-react-lite，这里简单提一下：mobx-react和mobx-react-lite都是连接react和mobx的中间件。

两种的区别是：

1. mobx-react支持类和函数组件，体积相对而言较大；
2. mobx-react-lite只支持函数组件，体积较小。

如：

npm install mobx mobx-react-lite

Mobx的核心概念

1. observable：被Mobx跟踪的状态
2. action：允许修改状态的方法，在严格模式下只有action方法被允许修改状态
3. computed：根据现有状态衍生出来的状态
4. flow：执行副作用，它是generator函数。可以更改状态值

Mobx的基本使用

使用步骤：

在src>新建store文件夹>新建CounterStore.js

1. 在CounterStore.js中创建用于存储状态的Store
2. 在CounterStore.js中创建用于修改状态的方法
3. 让Mobx可以追踪状态的变化：

        3-1：通过observable标注状态，使状态可观察

        3-2：通过action标识修改状态的方法，状态只有通过action方法修改后才会通知视图更新

注意：如果你的状态想让Mobx管理的话，那状态一定要用类进行生成。

如：

 

在src>index.js

4.创建CounterStore类的实例对象并将实例对象传递给组件

如：

在src>App.js

5.在组件中通过CounterStore实例对象获取状态以及操作状态的方法

6.当组件中使用到的Mobx管理的状态发生变化后，使视图更新。通过observer方法包裹组件实现目的

如：

7.当代码简化后，修改状态的方法中的this指向出现了问题，通过action.bound强制绑定this，使this指向CounterStore实例对象

如：

 8.创建RootStore：在应用中可存在多个Store，多个Store最终通过RootStore管理，每个组件都需要获取到RootStore，实现全局状态共享

如：

在src>store>新建index.js

启用装饰器

步骤：

1.下载

npm install -D react-app-rewired customize-cra

npm install -D @babel/core @babel/plugin-proposal-decorators @babel/preset-env

2.在项目根目录下创建config-overrides.js并加入配置

如：

3.在package.json文件中替换scripts

如：

 

4.在项目根目录下创建.babelrc并写入以下内容

如：

装饰器的使用

使用步骤：

1. 创建counterStore对象，用于存储默认状态和修改状态的方法

如：

 2.将counterStore对象放在一个全局的组件都可以够的到的地方

如：

 3.让组件获取counterStore对象中的状态并将状态显示在组件中

如：

 

异步操作

注意：如果修改状态方法里面有异步操作，则不能直接 this.list = data;来更新状态，必须将要更新状态的操作放在runInAction(()=>{})里，不然会报错。

如:

数据监测computed计算值

计算值是可以根据现有的状态或其它计算值衍生出来的值

如：

import { computed} from "mobx";

@computed get calculatedValue() {

        return this.count * 10

}

注意：computed只能用于get/set，不然会报错

数据监测autorun方法

当监测的状态发生变化时，你想根据状态产生“效果”，请使用autorun。Autorun会在初始化的时候执行一次，会在每次状态发生变化时执行。

格式：

import { autorun} from "mobx";

autorun(() => {

//要监测的数据以及数据发生变化时的操作

},{delay:1000}) //delay过N秒后执行