自建站网站产品市场推广方案
文档：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属性被修改时自动更新。
3.2 使用reaction对副作用进行建模
reaction和computed类似，区别是computed依赖State生成派生数据，reaction依赖state产生副作用（命令式编程和响应式编程之间的桥梁）