官方文档 https://www.mobxjs.com/
moxb 和 redux 都能用于 react 的状态管理，但 moxb 更简单，适合规模不大的应用 （规模大的应用若合理组织代码结构，也能用 moxb）
安装 moxb
npm i mobx npm i mobx-react-lite
- 此处安装 mobx-react-lite 仅可用于函数组件，不支持类组件
- 若想同时支持类组件和函数组件，则需安装 mobx-react
moxb 的工作流程
moxb 的目录结构
- 在 src 目录下创建文件夹 store
- 在文件夹 store 中根据需要创建 js/ts 文件，比如常用的全局状态–当前登录用户，则创建 User.js 文件
moxb 的基本使用
1. 定义响应式的属性和方法
以 User.js 为例，详见注释
import { makeAutoObservable } from "mobx"; // 定义类 class User { // 构造函数 constructor() { /** 【自动创建响应式】 * 第1个参数：要创建为响应式的对象，此处的this即指当前类 * 第2个参数：默认第1个参数的所有属性和方法都会添加响应式，可在此指定不添加响应式的属性和方法，如{if_Login:false},即属性if_Login无响应式 * 第3个参数：指定自动绑定this,方便在页面使用时，绑定事件无参数时可不使用箭头函数 */ makeAutoObservable(this, {}, { autoBind: true }); } // 属性 if_Login --- 用户是否登录 if_Login = false; // 属性 info --- 用户的信息 info = {}; // 方法 -- 用户登录 login(newInfo) { // 将属性 if_Login 的值设置为 true this.if_Login = true; // 将传入的参数赋值给属性 info this.info = newInfo; } // 方法 -- 用户登出 logout() { // 将属性 if_Login 重置为 false this.if_Login = false; // 将属性 info 重置为 {} this.info = {}; } } // 导出类实例 export default new User();
2. 在页面中使用
- 需用 observer 函数包裹目标组件，这样页面才能随状态值的变化渲染更新
index.jsx
// 导入实例 User import User from "./store/User.js"; // 导入 observer 函数 import { observer } from "mobx-react-lite"; // 用 observer 函数包裹目标组件 const Demo = observer(() => { return ( <> {/* 获取实例 User 的属性 if_Login 的值 */} <div>登录状态：{User.if_Login ? "已登录" : "未登录"}</div> {/* 获取实例 User 的属性 info 值的 name 属性的值 */} <div>用户名称：{User.info.name}</div> {/* 调用实例 User 的方法 login,因有自定义传参，需使用箭头函数 */} <button onClick={() => User.login({ name: "朝阳" })}>登录</button> {/* 调用实例 User 的方法 logout */} <button onClick={User.logout}>登出</button> </> ); }); export default Demo;
最终效果
moxb 的自动计算 computed
与 vue 的 computed 概念相同，在响应式方法前加上 get 即可实现
src/store/Counter.js
import { makeAutoObservable } from "mobx"; class Counter { constructor() { makeAutoObservable(this, {}, { autoBind: true }); } value = 0; increase() { this.value++; } // 用 get 装饰的方法，即computed，会随方法内响应式属性的变化，自动计算 get double() { return this.value * 2; } } export default new Counter();
src/index.js
import Counter from "./store/Counter.js"; import { observer } from "mobx-react-lite"; const Demo = observer(() => { return ( <> <div>计数器的值为：{Counter.value}</div> <div>双倍的计数器值为：{Counter.double}</div> <button onClick={Counter.increase}>+1</button> </> ); }); export default Demo;
moxb 监听属性
autorun
与 vue3 的 watchEffect 的概念相同，能监听所有属性的变化，且在页面初始化时就会执行一次
// autorun 需要导入 import { makeAutoObservable, autorun } from "mobx"; class Counter { constructor() { makeAutoObservable(this, {}, { autoBind: true }); } value = 0; increase() { this.value++; } } // 因 autorun 函数内需要使用到实例的属性，需先将实例存入变量 counter const counter = new Counter(); autorun(() => { //任一响应式属性变化时，都会执行，在页面初始化时，也会执行 console.log("counter.value的值为", counter.value); }); export default counter;
reaction
与 vue 的 watch 概念相同，可精准指定要监听的属性，在属性变化时才执行处理函数（可以获取到新值和旧值），再页面初始化时，不会执行。
// reaction 需要导入 import { makeAutoObservable, reaction } from "mobx"; class Counter { constructor() { makeAutoObservable(this, {}, { autoBind: true }); } value = 0; increase() { this.value++; } } // 因 reaction 函数内需要使用到实例的属性，需先将实例存入变量 counter const counter = new Counter(); reaction( // 第1个参数为要监听的属性 () => counter.value, // 第2个参数为响应函数 (newValue, oldValue) => { //仅在 value 属性变化时执行，在页面初始化时，不会执行 console.log("counter.value的旧值为", oldValue); console.log("counter.value的新值为", newValue); } ); export default counter;
moxb 处理异步
异步执行的代码，需放入 runInAction 函数中（否则会有需在 action 中修改状态的提示）
// runInAction 需要导入 import { makeAutoObservable, runInAction } from "mobx"; class Counter { constructor() { makeAutoObservable(this, {}, { autoBind: true }); } value = 0; increase() { setTimeout(() => { // 异步执行的代码 runInAction(() => { this.value++; }); }, 1000); } } export default new Counter();
moxb 模块化
当 store 设计的类比较多时，为了方便使用，可以将其模块化为一个 store 中，方便页面的导入和使用。
1. 将分散的store，全部放入RootStore
新建文件 src/store/index.js
import { createContext, useContext } from "react"; // 导入要统一管理的Store import user from "./User.js"; import counter from "./Counter.js"; // 将分散的store，全部放入RootStore class RootStore { user = user; counter = counter; } const store = new RootStore(); // 创建上下文 const Context = createContext(store); // 导出自定义hook函数 --- useStore export default function useStore() { // 返回 useContext return useContext(Context); }
2. 页面中导入后，解构赋值使用
import { observer } from "mobx-react-lite"; // 导入自定义 hook 函数useStore import useStore from "./store/index.js"; const Demo = observer(() => { // 解构赋值，获取到需要的 store const { counter, user } = useStore(); return ( <> <div>用户的登录状态为：{user.if_Login ? "已登录" : "未登录"}</div> <div>计数器的值为：{counter.value}</div> <button onClick={counter.increase}>+1</button> </> ); }); export default Demo;
