Mobx基本介绍

  • 简单，可扩展的状态管理工具
  • 无模板代码
  • 使用简洁，响应式数据可以直接修改（proxy）
  • 可以直接处理异步
  • 适合简单规模不大的应用

Mobx基本使用

  1. 环境配置 【安装 mobx, mobx-react || mobx-react-lite[只支持函数组件]】
  2. 核心概念
    1. observable：定义一个存储state的可追踪字段（proxy）
    2. action：将一个方法标记为可修改的state的action
    3. computed：标记一个可以由state派生出新值并且缓存其输出的计算属性
    4. 工作流程

Mobx学习记录 - 图1

  1. 基本使用流程
    1. 创建store
      1. 创建文件store/Counter.ts 通过Class创建一个类
      2. 使用makeObservable 将类的属性和方法变成响应式【makeObservable 默认两个参数，参数一：将谁变成可观察的；参数二：将那些属性或者方法变成可观察的】
      3. 导出Count实例

image.png

  1. 组件使用mobx
    1. 导出counter以及observer image.png
    2. 包裹组件image.png
    3. makeAutoObservable 的使用
  2. 介绍：加强版的makeObservable 默认推断所有属性
  3. 推断规则：
    1. 所有的属性为observable
    2. 所有的方法为action
    3. 所有带get的方法都为computed
  4. 三个参数：
    1. 参数一：绑定监听对象，当前类
    2. 参数二：排除不需要监听的属性和方法
    3. 参数三：autoBind设置可以绑定this指向

Mobx监听属性

  1. autoRun
    1. autoRun函数接受一个函数作为参数，每当该函数所观察的值发生变化时他都应该运行。
    2. 自己创建autorun时，他也运行一次
    3. Mobx会自动收集并订阅所有可观察的属性，一旦发生过发i年，autorun将会自动触发image.png
  2. reaction
    1. 更精细地控制要跟踪的可观察对象
    2. 接受两个函数作为参数：
      1. 参数一：data函数，其返回值将会作为第二个函数输入
      2. 参数二：回调函数
    3. 与autorun不同，reaction在初始化时不会自动运行image.png

      Mobx处理异步

  • 异步进程再Mobx种不需要任何特殊处理，因为不论是任何引发的所有reactions都将自动更新
  • 修改异步不在action函数中，控制台会报警告
    • 方法一：可以使用configure关闭警告image.png
    • 方法二：嵌套处理image.png
    • 方法三：使用runInAction(()=>{})

      Mobx模块化

      根据业务模块我们可以定义多个Store，通过一个根Stote统一管理所有的Store
      image.png