一文快速上手 mobx！

一、概述

• mobx 是一个简单的可拓展的状态管理库，无样本代码风格简约
• 不推荐使用装饰器语法
• 可以运行在任何支持 es5 的环境中，包含浏览器和 node

二、核心概念

2.1 observable

• 被 mobx 跟踪的状态

2.2 action

• 通过某个方法去修改状态的话，这个方法必须被标记为 action 方法
• 只有 action 方法才能修改状态
• 只有修改状态之后这个视图才进行更新

2.3 computed

• 派生状态

• 根据现有状态衍生出来的状态

2.4 flow

• 用来标识方法
• 想要应用当中执行副作用，副作用执行完成之后要更改状态
• 这个方法必须被标志为 flow

三、安装使用

• mobx：核心库

• mobx-react-lite：函数组件

• mobx-react：函数组件和类组件

• 安装：yarn add mobx@6.3.1 mobx-react-lite

四、 组织代码

• state 状态 数据
• action 动作 操作数据的方法

五、 User 管理

import { makeAutoObservable } from "mobx";
import { observer } from "mobx-react-lite";
import React, { memo } from "react";
class User {// 状态（成员属性）name = "张三";age = 18;constructor() {// 将这个对象转变为一个可以被观察的实例对象（自动绑定所有）makeAutoObservable(this,{},{autoBind:true});// 只绑定指定的的组件对象//   makeAutoObservable(this, {//   tBanners: observable,//  })}// 计算出生年份get bornYear() {return new Date().getFullYear() -18}// 动作（成员方法）changeName(newName) {this.name = newName;}increment() {this.age += 1;}decrement() {this.age -= 1;}
}
// 得到一个可以被观察的实例对象
const user = new User();
// 创建一个有观察能力的组件
const MyComponent = observer(({ store }) => {const {name,age,increment,decrement,bornYear} = storereturn (<><h2>name:{name} age:{age} bornYear:{bornYear}</h2><button onClick={()=>increment()}>+1</button><button onClick={()=>decrement()}>-1</button></>);
});
const Mobx = memo(() => {return (<div><MyComponent store={user} /></div>);
});export default Mobx;

六、项目中使用

• store/User.js

import { makeAutoObservable } from "mobx";
class User {// 状态（成员属性）name = "张三";age = 18;constructor() {// 将这个对象转变为一个可以被观察的实例对象makeAutoObservable(this,{},{autoBind:true});}// 计算出生年份get bornYear() {return new Date().getFullYear() -18}// 动作（成员方法）changeName(newName) {this.name = newName;}increment() {this.age += 1;}decrement() {this.age -= 1;}
}
export default User  

• store/index.jsx

import User from './User'
import Goods from './Goods'
//1. 合并
class RootStore{constructor(){this.user = new User()this.goods = new Goods()}
}
const rootStore = new RootStore()
//2. 创建上下文对象。并且封装成一个组件
const RootStoreContext = createContext()
const RootStoreProvider = ({children})=>{return(<RootStoreContext.Provider value = {rootStore} >{chldren}</RootStoreContext.Provider>)
}
export default RootStoreProvider 
// 3. 获取一个获取上下文对象数据的方法
export const useRootStore = ()=>{return useContext(RootStoreContext)
}

• main.jsx

<RootStoreProvider ><App />
</RootStoreProvider>

• 组件中使用

import { observer } from "mobx-react-lite";
import {useRootStore} from './store'
const MyComponent = observer(() => {const {user} = useRootStore()const {name,age,increment,decrement,bornYear} = userreturn (<><h2>name:{name} age:{age} bornYear:{bornYear}</h2><button onClick={()=>increment()}>+1</button><button onClick={()=>decrement()}>-1</button></>);
});