导航

HTML

CSS

JavaScript

浏览器 & 网络

版本管理

框架

构建工具

TypeScript

性能优化

软实力

算法

UI、组件库

Node

业务技能

针对性攻坚

AI

核心思想

大纲

目标

官网链接

https://cn.mobx.js.org/

初始化

安装 mobx、mobx-react

基本使用流程

• observable 是用来装饰需要观测的变量属性的
  • 从 mobx 中导入
• action.bound 是用来定义方法的
• observer 是 react 和 mobx 的桥梁，让 React 组件能响应式更新 store 中的状态，是用来装饰React组件的
  • 从 mobx-react 中导入
  • 没有 observer 组件不会更新

装饰器

基本用法

装饰器传参

添加实例属性

小案例 mixins

修饰类成员

• target: 目标类的.prototype
• name: 被修饰的类成员的名称
• descriptor: 被修饰的类成员的描述对象

observable 函数

• 把普通的数据变为可被观测的数据
• 不但能修饰基本数据，复杂数据（数组、对象、Map…）也能修饰

autorun

• 加载后默认立即执行一次，后续 store 中有被观测数据发生变化，会继续执行
  • 如果 autorun 中监听的是个没被观测的数据，则只会在初次加载时执行一次，后续变化不会触发执行

p.s. 下边会加载完立即执行一次（0），改变数据后会再次执行一次（20）

computed 计算属性

action

• 尽量不要使用 store 对象实例来改变 store 数据
• 而推荐使用 action 封装起来直接调用
• 在 action 中对同一个数据做多次修改，只会触发一次 autorun

configure

• 强制只能通过 action 来改变数据

直接修改会报错

bound 绑定 this

• 作用：绑定 this ，使其执行时，this 为 store 实例，不会被改变

runInAction

• 如果不想定义 action ，则可以用 runInAction 代替
• 从 mobx 中解构出 runInAction

异步 action

1. 外部再定义一个同步action专门修改状态（推荐）

不能在异步action中直接操作状态，而要再定一个action单独修改，然后在异步action中调用此action

1. 在异步action内部定义同步action

1. 利用 runInAction

监听数据的方式

computed

autorun