携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天，点击查看活动详情
主要讲mobx的api介绍，粗略认识一下，它是一个简单，可扩展的状态管理
官网：https://zh.mobx.js.org/README.html
简单，可扩展的状态管理
安装
mobx-react mobx
api
observable
包裹观察对象，类似 reactive
autorun
观察对象改变时，会自动运行，且初始化会运行一次
类似 useEffect，监听观察对象
makeObservable
简单说就是构造函数里用的，可以把里面的属性改成观察对象，或者computed等的注解，
一般情况下，makeObservable 是在类的构造函数中调用的，并且它的第一个参数是 this，具体用法看下面的
computed
惰性，缓存，和vue一样
constructor(price) {
makeObservable(this, {
price: observable,
amount: observable,
total: computed
})
this.price = price
}
action
和 vue类似，改 state的动作函数
1、使用事务的机制，值改多次算一次
2、方便排查错误
constructor(value) {
makeObservable(this, {
value: observable,
//不加这个会提醒加。
increment: action
})
}
increment() {
// 观察者不会看到中间状态.
this.value++
this.value++
}
flow
redux-aaga
支持异步修改值
constructor() {
makeAutoObservable(this, {
fetchProjects: flow
// flow.bound
})
}
// 注意星号, 这是一个 generator 函数!
// async await也行，但是上面的更优雅，有传染性，和它相关的函数都需要async
*fetchProjects() {
const projects = yield fetchGithubProjectsSomehow()
}
因为在外边用 fetchProjects会报错没有 this，要加 bound
makeAutoObservable
使用：
makeAutoObservable(target, overrides?, options?)
makeAutoObservable 就像是加强版的 makeObservable，在默认情况下它将推断所有的属性。你仍然可以使用 overrides 重写某些注解的默认行为。 具体来说，false 可用于从自动处理中排除一个属性或方法。 查看上面的代码分页获取示例。 与使用 makeObservable 相比，makeAutoObservable 函数更紧凑，也更容易维护，因为新成员不需要显式地提及。 然而，makeAutoObservable 不能被用于带有 super 的类或 子类。
推断规则：
- 所有 自有 属性都成为
observable。 - 所有
getters 都成为computed。 - 所有
setters 都成为action。 - 所有 prototype 中的 functions 都成为
autoAction。 - 所有 prototype 中的 generator functions 都成为
flow。（需要注意，generators 函数在某些编译器配置中无法被检测到，如果 flow 没有正常运行，请务必明确地指定flow注解。） - 在
overrides参数中标记为false的成员将不会被添加注解。例如，将其用于像标识符这样的只读字段。
autoBind: true 默认使用 action.bound/flow.bound，而不使用 action/flow。不影响被显式注释过的成员
makeAutoObservable(this,{autoBind:true})
Reaction
autorun精细版，初始化的时候不会执行
用法：
reaction(() => value, (value, previousValue, reaction) => { sideEffect }, options?).
reaction 类似于 autorun，但可以让你更加精细地控制要跟踪的可观察对象。 它接受两个函数作为参数：第一个，data 函数，其是被跟踪的函数并且其返回值将会作为第二个函数，effect 函数，的输入。 重要的是要注意，副作用只会对 data 函数中被访问过的数据做出反应，这些数据可能少于 effect 函数中实际使用的数据。
一般的模式是在 data 函数中返回你在副作用中需要的所有数据， 并以这种方式更精确地控制副作用触发的时机。 与 autorun 不同，副作用在初始化时不会自动运行，而只会在 data 表达式首次返回新值之后运行。
reaction(
() => giraffe.isHungry,// 监测对象
(isHungry,pre) => {
....处理
}
)
giraffe.isHungry = 2//触发
when
when 会观察并运行给定的 predicate 函数，直到其返回 true。 一旦 predicate 返回了 true，给定的 effect 函数就会执行并且自动执行器函数将会被清理掉。
when(predicate: () => boolean, effect?: () => void, options?)
满足后，只走一次，可以提前取消的
runInAction
多合一。
使用这个工具函数来创建一个会被立即调用的临时 action。在异步进程中非常有用。
runInAction(() => {
state.value++
state.value++
})
