MobX-State-Tree 入门教程：构建一个TODO应用

最新推荐文章于 2025-06-06 09:04:30 发布

范垣楠Rhoda

最新推荐文章于 2025-06-06 09:04:30 发布

阅读量265

点赞数 4

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00283/article/details/148464903

MobX-State-Tree 入门教程：构建一个TODO应用

mobx-state-tree Full-featured reactive state management without the boilerplate 项目地址: https://gitcode.com/gh_mirrors/mo/mobx-state-tree

前言

MobX-State-Tree（简称MST）是一个强大的状态管理库，它结合了可变数据的简单性和不可变数据的可追溯性，同时具备响应式数据的性能优势。本教程将通过构建一个TODO应用来介绍MST的核心概念和使用方法。

环境准备

在开始之前，确保你已经具备以下条件：

基本的React知识
Node.js环境（如果选择本地开发）
对状态管理的基本理解（虽然不是必须的，但会有帮助）

本地开发环境搭建

推荐使用以下命令快速创建一个React项目：

npx create-react-app mst-todo
cd mst-todo
yarn add mobx mobx-react-lite mobx-state-tree
yarn start

MST核心概念

模型定义

MST的核心是"活树"概念，这棵树由受保护的、可变的对象组成，同时包含运行时类型信息。我们需要先定义模型来描述数据结构：

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

const Todo = types.model("Todo", {
  name: types.optional(types.string, ""),
  done: types.optional(types.boolean, false)
})

const User = types.model("User", {
  name: types.optional(types.string, "")
})

这里我们定义了两个模型：Todo和User。types提供了多种类型校验器，确保数据完整性。

创建模型实例

定义模型后，可以通过.create()方法创建实例：

const todo = Todo.create({ name: "学习MST" })
const user = User.create({ name: "张三" })

如果传入的值不符合类型定义，MST会抛出错误，这有助于在开发早期发现问题。

组合模型

我们可以创建更复杂的根模型来组合其他模型：

const RootStore = types.model("RootStore", {
  users: types.map(User),
  todos: types.map(Todo)
})

const store = RootStore.create({
  users: {},
  todos: {}
})

types.map创建一个可观察的键值映射，非常适合存储实体集合。

操作和视图

定义操作

模型的行为通过actions定义：

const Todo = types.model("Todo", {
  name: types.optional(types.string, ""),
  done: types.optional(types.boolean, false)
}).actions(self => ({
  setName(newName) {
    self.name = newName
  },
  toggle() {
    self.done = !self.done
  }
}))

self参数代表模型实例本身，这种设计避免了this绑定问题。

计算属性

视图(View)用于定义计算属性：

const RootStore = types.model(...)
  .views(self => ({
    get pendingCount() {
      return Array.from(self.todos.values())
        .filter(todo => !todo.done).length
    }
  }))

计算属性会自动缓存，只有当依赖的数据变化时才会重新计算。

与React集成

基本集成

使用mobx-react-lite的observer将组件变为响应式：

import { observer } from "mobx-react-lite"

const TodoView = observer(({ todo }) => (
  <div>
    <input
      type="checkbox"
      checked={todo.done}
      onChange={todo.toggle}
    />
    <input
      type="text"
      value={todo.name}
      onChange={e => todo.setName(e.target.value)}
    />
  </div>
))

性能优化

细粒度的组件划分可以优化渲染性能：

const AppView = observer(({ store }) => (
  <div>
    {Array.from(store.todos.values()).map(todo => (
      <TodoView key={todo.id} todo={todo} />
    ))}
  </div>
))

这样只有变化的TODO项会重新渲染。

高级特性

快照和恢复

MST可以生成和恢复快照：

import { getSnapshot, applySnapshot } from "mobx-state-tree"

// 获取快照
const snapshot = getSnapshot(store)

// 恢复快照
applySnapshot(store, snapshot)

时间旅行

基于快照功能可以实现时间旅行：

const history = []
let current = -1

onSnapshot(store, snapshot => {
  if (current === history.length - 1) {
    current++
    history.push(snapshot)
  }
})

function undo() {
  if (current <= 0) return
  current--
  applySnapshot(store, history[current])
}