Mobx 核心概念简单入门：以股票为例

IMWeb前端团队

发布于 2019-12-03 16:02:24

7780

发布于 2019-12-03 16:02:24

文章被收录于专栏：IMWeb前端团队IMWeb前端团队

本文作者：IMWeb 结一原文出处：IMWeb社区 未经同意，禁止转载

概述

Mobx 是一个简单、可扩展的状态管理工具。相比 redux，mobx可以使用更自由，更少的代码来管理状态。

核心概念

MobX 主要包括了四个核心概念：可观察的状态、根据状态得到的计算值、基于状态变化发生的反应，触发状态变化的动作。

下面我们以股票为例，简单说明下这四个核心概念。

假设你有1000股腾讯的股票，现在的价格为400元每股。

股价是随时可变的，而数量你也可以买进卖出来改变，所以这两个数据是可变的，也即是可观察的状态；
总价值 = 股数 * 每股的价值。那么即是根据状态得到的计算值；
每次股价变动，会导致页面上的股价的曲线图发生改变，也会导致页面上显示的总价值发生改变。那么页面上曲线图及总价值的UI就是基于状态发生的反应；
你会根据股价的变动，来决定买入还是卖出，这会导致你拥有的股数发生变化。那么买入卖出即是触发状态变化的动作。

可观察的状态（Observable state）

MobX 通过使用 @observable 为现有的数据结构(如对象，数组和类实例)添加了可观察的功能，这样当数据发生变化的时候就可以继续进行下一步发应。如下设置股票的价格和数量可观察：

class Stock  {
    @observable price = 400;
    @observable num = 1000;
}

根据状态得到的计算值（Computed values）

Mobx 可通过 @computed 装饰器来定义某些状态发生变化时自动更新的值。如下设置股票总价值为计算值：

class Stock {
    @observable price = 400;
    @observable num = 1000;

    @computed get totalVal() {
        return this.price * this.num;
    }
}

基于状态变化发生的反应（Reactions）

Mobx 可使用 autorun 函数来创建一些自定义的反应，如下当股价变化时，打印股价：

// 改变股价为420
const stock700 = new Stock();
stock700.price = 420;

autorun(() => {
    console.log("股价发生变化: " + stock700.price );
    // 或者去干点啥
    doSomething(stock700.price);
})

function doSomething (price) {
    // 做点什么，更新 UI 什么的
}

触发状态变化的动作（Action）

在非严格模式下，mobx的状态可以在任何地方进行修改，如上面我们改变股价就是直接修改。但是在严格模式下，状态只能通过 action 来进行修改，如下我们增加买入卖出股票：

class Stock {
    @observable price = 400;
    @observable num = 1000;

    @computed get totalVal() {
        return this.price * this.num;
    }

    @action
    buyIn = (num) => {
        this.num += num;
    }

    @action
    sayOut = (num) => {
        this.num -= num;
    }
}

结合 React

如 redux 有 react-redux 一样，mobx 也有一个 mobx-react，可与 react 结合。mobx-react 提供一个 @observer 装饰器，当你的状态发生变化时，会自动（autorun）调用组件的 render 方法，更新 UI，这样就可以把你的(无状态函数)组件变成响应式组件。

以 todo 为例，使用 react & mobx 可参考： mobx react todo

最后奉上其经典的架构设计图，如下：