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

Class组件

无状态组件

标签：makeAutoObservable,Mobx5,makeObservable,react,Mobx6,Mobx,store,属性
来源： https://www.cnblogs.com/flyingdefish/p/14972341.html