当前位置：首页 > news >正文

【Mobx】学习笔记

news 2025/7/18 6:28:14

文档：MobX 主旨 | MobX 中文文档

原则

Mobx 使用单向数据流，利用 action 改变 state ，进而更新所有受影响的 view

1. State（状态）

State是驱动应用程序的数据。

State可存储任意数据类型的变量。

将State中的属性标记为observable时，Mobx就可跟踪。

import { makeObservable, observable, action } from "mobx"class Todo {id = Math.random()title = ""finished = falseconstructor(title) {// 在构造函数中定义，设置为可被观察的对象makeObservable(this, {title: observable,finished: observable,toggle: action})this.title = title}toggle() {this.finished = !this.finished}
}

2. Actions（动作）

标记方法(一些可以改变被标记为observable属性值的操作)，Action(动作) 是任意可以改变 State(状态) 的代码(直接赋值的方式修改属性值)。

默认情况下，不允许在 actions 之外改变 state。

上面示例中，toggle方法改变了finished属性的值，finished是被observable标记的，即所有改变了finished属性值的方法都应该被标记为action。MobX 可以自动进行事务处理以轻松实现最佳性能。

action.bound（注解）

注解可用于将方法自动绑定到正确的实例，这样this会始终被正确绑定在函数内部。

runInAction

使用这个工具函数来创建一个会被立即调用的临时 action。在异步进程中非常有用。

3. Derivations（派生）

任何 来源是_State(状态)_ 并且不需要进一步交互的东西都是 Derivation(派生)。

注：所有的derivations默认将会同步更新(state中属性值更新，computed派生属性值同步更新)；需要注意的是，computed values的更新是惰性的，只有action之后读取到该值或者副作用驱动，MobX会立刻把它的值算到最新，中间不会留一个“脏”值；

Mobx区分两种派生：

Computed values：总是可以通过纯函数从当前的可观测 State 中派生（注：所有的computed values不应该修改state）
Reactions：当 State 改变时需要自动运行的副作用 (类似于useEffect，命令式编程和响应式编程之间的桥梁)

黄金法则：基于当前 State 创建值，始终使用 computed。

3.1 通过computed对派生值进行建模

import { makeObservable, observable, action } from "mobx"class Todo {id = Math.random()title = ""finished = falsetodoList = []// 在构造函数中定义constructor(title) {makeObservable(this, {title: observable,todoList: observable,finished: observable,toggle: action,filterFinished: computed, //筛选已完成的数组})this.title = titlethis.todoList = todoList;}toggle() {this.finished = !this.finished}get filterFinished(){return this.todoList.filter(todoList => todoList.finished)}
}

Mobx 会确保 filterFinished会在todoList数组发生变化中或者 todoList中的一个对象中的 finished属性被修改时自动更新。