用 Mobx 实现 React 应用的状态管理

MobX 是一个状态管理库，它会自动收集并追踪依赖，开发人员不需要手动订阅状态，当状态变化之后 MobX 能够精准更新受影响的内容，另外它不要求 state 是可 JSON 序列化的，也不要求state 是 immutable，MobX 推荐的数据流如下图所示：

本文先以一个 demo 单独介绍 Mobx 的用法，再介绍如何将 Mobx 与 React 结合实现 React 应用程序的状态管理。

从一个 demo 开始

这部分用 MobX + TypeScript 实现一个 TODO List 的 demo，MobX 的版本为 6.5.0，TypeScript 的版本为 4.5.4，将 TypeScript 编译器配置项 useDefineForClassFields 设置为 true。

创建类并将其转化成可观察对象

创建 ToDoItem 类和 ToDoList 类，ToDoItem 类的代码如下：

import { makeObservable, observable, action } from 'mobx'
class ToDoItem {id: numbername: stringstatus: 0 ｜ 1changeStatus(status: Status) {this.status = status}constructor(name: string) {this.id = Uid ++this.name = namethis.status = 0 // 注意这里makeObservable(this, {status: observable,changeStatus: action})}
} 

用 makeObservable 将 ToDoItem 实例变成可观察的，用 observable 标记 status 字段，让 MobX 跟踪它的变化，changeStatus 方法用于修改 status 的值，所以用action标记它。

ToDoList 类比 ToDoItem 类复杂一些，它收集 Todo-List Demo 需要的全部数据，代码如下：

import { makeObservable, observable, action, computed, runInAction } from 'mobx'

class ToDoList {searchStatus?: 0 ｜ 1list: ToDoItem[] = []get displayList() {if (!this.searchStatus) {return this.list} else {return this.list.filter(item => item.status === this.searchStatus)}}changeStatus(searchStatus: Status | undefined) {this.searchStatus = searchStatus}addItem(name: string) {this.list.push(new ToDoItem(name))}async fetchInitData() {await waitTime() // 注意这里runInAction(() => {this.list = [new ToDoItem('one'), new ToDoItem('two')]})}constructor() {makeObservable(this, {searchStatus: observable,list: observable,displayList: computed,changeStatus: acti