react + Mobx5 & Mobx6 使用教程
MobX是react的状态管理库之一。
无主见，可扩展的状态管理。支持单向数据流，
动作改变状态，状态改变会更新所有受影响的视图；
安装
npm install mobx mobx-react
浏览器支持
Mobx5 : 需要搭配 react16.x 使用，如果搭配 react17 会报错
Mobx6 : 搭配 react17 使用
核心概念
-
observable
可以用任何数据结构来存储状态，如对象、数组、类。 循环数据结构、引用，都没有关系。 只要确保所有会随时间流逝而改变的属性打上 mobx 的标记使它们变得可观察即可。 -
computed
MobX 的属性与 Vue 的 computed 一样，在 makeAutoObservable 中就是一个 getter，getter 依赖的值一旦发生变化，getter 本身的返回值也会跟随变化。 -
action
在 action 中修改 store 中的响应属性（虽然直接修改也能生效，但是这样会让 MobX 状态的管理比较混乱，以免拿到的某个属性还处于中间态，最后计算的结果不够准确） - observer
类前缀，允许当前类访问 mobx 文件中 store 中数据和方法 -
autorun
每当 store 的响应属性发生修改时，传入 autorun 的方法（effect）就会被调用
Class 组件
Mobx5
通常采用装饰器的写法，包括@observable, @computed, @action
// store.js
// UI.js
Mobx6
Mobx6 在store.js中不需要再写这些装饰器了，直接使用makeObservable或者makeAutoObservable。通常用在类的构造函数中。
用法一： 其他与 Mobx5 一样的写法，在store文件加上
用法二：store文件中的装饰器都不用写，直接使用 makeObservable 或 makeAutoObservable
makeObservable(target, annotations?, options?) 捕获target对象的属性，并使它们可观察。在class构造函数中，第一个参数为this。
makeAutoObservable(target, overrides?, options?) makeAutoObservable与makeObservable类似，不同点是它会默认推断所有属性，比makeObservable更容易维护。注意：makeAutoObservable不能用于super或subclassed的类。
无状态组件
Mobx5
遵循普通写法
Mobx6
用法一：Mobx6提供了useLocalObservable, useObserverHOC用法。
用法二：除了使用useObserver钩子函数，还可以使用Observer
基础写法
适用Mobx5 和 Mobx6