结一

23 天前

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

本文作者: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

最后奉上其经典的架构设计图,如下:

参考资料

0条评论

    您需要 注册 一个IMWeb账号或者 才能进行评论。