1.mobx的基础使用.md

mobx 的基础使用

mobx 本质上是通过对观察的变量的 get 与 set 方法的劫持，来实现对状态的监听。主要涉及的函数有三个，分别是： observable、computed、autorun。

observable

使用 observable 给作为状态存储的变量添加监听，ex：

import { observable, computed, autorun } from 'mobx';
const number = observable([1, 2, 3]);

computed

使用 computed 可对 observable 函数观测的变量做汇总计算，如果 computed 返回的值有 observable 函数 观测的变量参与计算且结果变化，则会触发有 computed 返回值参与其中的 autorun 注册的函数。

const sum = computed(() => {
    console.log('compute the sum of numbers');
    return numbers.reduce((a, b) => a + b, 0);
});

autorun

使用 autorun 可以注册响应函数，若 autorun 中使用到的 observable 或 computed 返回值发生变化，则会 触发执行在该 autorun 中注册的函数。除此之外会在一开始时也执行一遍。

// 执行 disposer 即可解除该响应函数
const disposer1 = autorun(() => console.log(`sum: ${ sum.get() }`));
const disposer2 = autorun(() => console.log(`length: ${ numbers.length }`));

场景分析与案例

见案例代码：scripts/base1.js