- 苏格团队
- 作者：Demian
一、前言
本文是笔者在看了 frontendmaster 的状态管理课程之后，对 mobx 进行的初步学习的总结。
二、Mobx 简介
mobx 是社区内使用的较为常见的一种状态管理库，mobx 官网称其
通过透明的函数响应式编程(transparently applying functional reactive programming - TFRP)使得状态管理变得简单和可扩展
mobx 主要有以下几个核心特性：
- Observable State（可观察状态）
- Computed Values（计算属性）
- Reactions（反应，完成页面渲染、日志打印）
- Actions（动作）
以下介绍将结合部分 mobx 代码，代码地址： 示例代码
详细代码如下:
// html
<div id="console" />;
// js
const { computed, observable, autorun } = mobx;
class Person {
@observable firstName;
@observable secondName;
constructor(firstName, secondName) {
this.firstName = firstName;
this.secondName = secondName;
}
@computed get fullName() {
return this.firstName + ' ' + this.secondName;
}
}
const wdz = new Person('Demian', 'Wang');
const greet = observable.box('good morning! ');
const render = () => {
document.getElementById('console').innerText = greet + wdz.fullName;
};
// 动态更新dom内容
autorun(render);
复制代码此时网页 ui 为：
1.Computed Values
首先介绍一下计算属性。在上述代码中 fullName 就是计算属性。相信用过 vue 的对这个很熟悉。当我们在命令行手动修改 wdz 的 firstName 时，wdz 的 fullName 会自动更新
此时网页 ui 也发生了实时的变化：
可见，computed 属性可以响应 observable 属性的变化。
值得一提的是，在 react 的 render 函数中，如果存在很多 props 的计算的话，可以使用 get 语法的形式将这部分逻辑抽离：
get fullName() {
return this.props.firstName + this.props.secondName;
}
render() {
return <div>{this.fullName}</div>
}
复制代码这里的 fullName 和可计算属性类似，依据传入的 props 属性动态变化。
2.Observable State
通过在类属性前加上@observable，为该属性添加了可观察功能。
import { observable } from 'mobx';
class Person {
@observable firstName;
constructor(firstName) {
this.firstName = firstName;
}
}
复制代码使用装饰器语法很简洁的使得 name 拥有了可观察的功能。
那么 Observable 有什么作用呢？
见以下代码：
const greet = observable.box('good morning! ');
复制代码我们为 greet 返回一个 observable 包装过的值，首先我们试着直接改变 greet 的值
但是，此时网页 ui 没有实时变化：
以下是简化版的 observable：
// 简单的observable
const observable = value => {
return {
value,
get() {
console.log('get', this.value);
return this.value;
},
set(newValue) {
console.log('set', newValue);
// 向全局通知该数据更新
report(this.value, newValue);
this.value = newValue;
}
};
};
// reactive代码
eventEmitter.on('report', (oldValue, newValue) => {
console.log(oldValue, '===>', newValue);
});
// 通知给全局
const report = (oldValue, newValue) => {
eventEmitter.emit('report', oldValue, newValue);
};
复制代码主要是使用 value 值存储原始类型，使用 get 获取 value 值，使用 set 更新 value 值。值得注意的是，在更新数据以前，set 方法会根据一定的配置，选择是否向全局发送更新事件，相应的一些 computed 的属性会接收到该事件。
3.Reactions
const render = () => {
document.getElementById('console').innerText = greet + wdz.fullName;
};
// 动态更新dom内容
autorun(render);
复制代码当 observable 数据变化后，页面会自动更新 ui。
三、mobx 实战-实现一个 todoList
注：由于 create-react-app 创建的项目默认不能使用装饰器语法，所以笔者暴力的 eject 并安装了相应的 babel 配置。
以下是 todoList 的项目结构：
当我们使用 mobx 维护状态时，store 不像 redux 那样是全局唯一的，我们可以细粒度地维护一个个数据模型。在中小型的项目中，mobx 的 store 轻便简洁，使用起来很顺滑。
项目中用到的 mobx 特性：
1.observable
主要维护 todolist 的基本状态：待办列表 todolist、新建待办的内容 itemContent 和当前筛选类型 filterType
2.computed
根据当前筛选器的类型，返回对应的 todoList。
3.reactions
筛选器状态变化后，响应式地打印出当前筛选器的状态。
4.actions
点击筛选器后的状态切换和异步事件。这里需要使用 runInAction 包装异步函数，这样才可以完成响应式的更新数据。
四、Mobx vs Redux
两者都是优秀的状态管理工具，都可以帮助开发者完成业务开发。所以抛开业务场景谈论工具优劣是无意义的，笔者这里只是简单列出两者的区别。
修改数据
中间件
五、总结
笔者只是介绍了 mobx 的冰山一角，其作为一种响应式的状态管理库，在中小型项目中有着高效率的表现。响应式的写法、细粒度的 store 管理都体现了 mobx 的灵活性。