MobX中文官网:https://cn.mobx.js.org/refguide/api.html
看完官网再来看我的总结:
MobX简介
- mobx 是一个数据管理库,可以和 react 配合使用
- 可以直接修改数据,对 UI 进行精确刷新
- 透明的函数响应式编程,状态管理变得简单和可扩展
核心要点
(1)State
- 状态集,一个可实例化的类
(2)observable
- 可观察的,对变量进行观察/监控 ,定义属性时使用
(3)Computed values(计算值)
- 创建计算值,没有任何副作用而只是返回一个值
(4)Actions(动作)
- 在任何更改 observable 或者有副作用的函数上使用动作
(5)Decorators(装饰器)
- @observable
- @action
- @computed
(6)Reactions(反应)
- 反应 是自动响应状态变化的副作用
MobX 优点
- 开发难度低, 基于观察者模式,采用多节点管理数据,是一个很轻量、入手简单、代码耦合小的数据框架
- 开发代码量少
- 渲染性能好, observable观测数据的修改是同步的,不会造成页面的重新渲染
- 灵活易用
- 组件为无状态,将状态和操作放到MobX的model中,无须在本地建立点击处理程序
- 响应式理念
MobX 缺点
- 缺乏规则和限制,可随意修改State,可能不适合大型团队, 太过自由
- 学习成本大
- 难以调试,log出来很不直观
- 在国内实践比较少,相关的中文资料也比较少
- 初始化值date放到state的 params 中相当难拿
- 缺最佳实践和社区
总结
将现有项目的一个页面由Dva改为MobX体验了一把,很爽,很像Vue的双向数据绑定。
示例代码,不可直接运行:
import { observable, action, computed, runInAction } from 'mobx';
import moment from 'moment';
import _ from 'lodash';
import { $intl } from 'src/services';
import $theme from 'src/theme';
export default class List {
@observable
benchmark: any;
@observable
tags: any;
constructor() {
this.benchmark = {};
this.tags = [];
}
// 不调用接口的action
@action
getTags(params: any, $const: any): void {
this.tags = [];
_.forEach(params, (value, key) => {
let arr = [];
if (!value) {
return void 0;
} else if (_.isArray(value)) {
arr = value;
} else {
arr.push(value);
}
arr = arr.map((v) => ($const.showName[v] ? $intl.t($const.showName[v]) : v));
this.tags.push({
label: key,
value: arr
});
});
}
/**
* ---------------------------- interface request start -------------------------
*/
@action
getBenchmark = async (params: any) => {
let { CsiServices } = $theme.getProviders();
try {
const data = await CsiServices.getBenchmark(params);
// await 之后,再次修改状态需要动作:
runInAction(() => {
this.benchmark = data[0];
});
} catch (e) {
console.error(e);
}
};
/**
* ---------------------------- interface request end ---------------------------------
*/
}