MobX 与 MobX State Tree 的关系_mobx-state-tree-CSDN博客

一、前言：为什么要有状态管理？

在开发前端（特别是 React）应用时，随着项目复杂度增加，组件之间的数据传递、共享、同步变得非常麻烦。比如：

父子组件传参时，参数会变得很长、很难管理。
兄弟组件之间需要通信，要么通过父组件中转，要么用事件，总之很绕。
多个页面之间数据同步时，代码会变得混乱，难以维护。

为了解决这些问题，出现了各种状态管理工具，比如 Redux、MobX、Vuex 等。

MobX 是其中一个主流的响应式状态管理工具，MobX State Tree（MST）则是在 MobX 基础上，进一步规范了数据结构和流程，提供了更强的可维护性和可预测性。

二、MobX 与 MobX State Tree 的关系

MobX 是一个响应式状态管理库，特点是灵活、简单、自动追踪依赖。它让你像写普通 JS 一样写代码，状态变了，相关 UI 会自动更新。
MobX State Tree（MST） 是基于 MobX 的更高级封装，它引入了“树结构”的模型（State Tree），并规定了数据模型、数据流、类型约束、生命周期等，适合做中大型应用。

简而言之，MobX 更灵活，适合小项目；MST 更规范，适合中大型项目。

三、MST 的核心思想

MST 的核心思想可以总结为三点：

树状结构：所有状态都是“挂”在一棵树上的，每个节点有自己的类型、属性、方法。
强类型：每个数据模型必须声明类型，避免乱用和错误。
单向数据流：数据只能通过“动作”修改，避免随意乱改。

这三个思想把状态管理变得像“养一棵树”：树有主干、有分支、有叶子，每个部分都明确知道自己是什么，有什么功能，怎么变化。

四、MST 的基本概念

1. 模型（Model）

模型就是树上的“节点”，比如用户、订单、购物车、消息等。每个模型都用 types.model() 定义。

import {
   
    types } from "mobx-state-tree";

const User = types.model("User", {
   
   
  id: types.identifier,
  name: types.string,
  age: types.number
});

2. 实例（Instance）

模型只是“结构蓝图”，只有实例才是真正的数据。比如你有一个 User 模型，可以有很多个不同的用户实例。

const user = User.create({
   
    id: "1", name: "张三", age: 18 });

3. 树（State Tree）

所有模型的实例最终都会挂在一棵“树”上，这棵树就是你全局的状态。

const RootStore = types.model("RootStore", {
   
   
  users: types.array(User),
  currentUser: types.maybe(types.reference(User))
});

const rootStore = RootStore.create({
   
   
  users: [{
   
    id: "1", name: "张三", age: 18 }],
  currentUser: "1"
});