初识MobX要点

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 ---------------------------------
     */
    
}