Mobx核心概念

1.observable：定义一个存储state的响应式字段(底层为proxy对象)
2.action:一个修改状态state的方法
3.computed：标记一个由state派生出的值，和Vue中的类似

Mobx使用准备

1.安装react-app-rewired、customize-cra、@babel/core @babel/plugin-proposal-decorators @babel/preset-env
2.使用react-app-rewired修改package.json中的脚本
3.添加config-overrides.js和.babelrc配置项文件
具体参考：https://blog.csdn.net/lfy_wybss/article/details/122079178?spm=1001.2101.3001.6661.1&utm_medium=distribute.pc_relevant_t0.none-task-blog-2~default~BlogCommendFromBaidu~default-1-122079178-blog-111914160.pc_relevant_scanpaymentv1&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2~default~BlogCommendFromBaidu~default-1-122079178-blog-111914160.pc_relevant_scanpaymentv1&utm_relevant_index=1

Mobx的使用流程

1.创建store状态机类，使用makeObservable检测状态和方法
    注意:这里可以使用makeAutoObservable自动追加对状态和方法以及计算属性的配置makeAutoObservable(this,{排除项:boolean},{autoBind:boolean是否绑定this})

import { makeObservable, observable, action } from "mobx"

class Counter {
    constructor() {
        makeObservable(this, {
            count: observable,
            increment: action
        })
    }
    count = 0
    increment() {
        console.log(1)
        this.count++
    }
}
export default new Counter()

2.在需要使用状态的组件引入该状态机类即可

注意：要使用mobx-react提供的observer高阶组件包裹对应的组件才能实现响应式更新

import store from "./store/Counter"
import { observer } from "mobx-react"
function App() {
  return (
    <div className="App">
      <h1>mobx测试页面</h1>
      <div>count:{store.count}</div>
      <button onClick={() => { store.increment() }}>点击+1</button>
    </div>
  );
}

export default observer(App);

Mobx中的this指向问题：bound的使用

在方法后可以追加bound，使this指向固定指向类实例

Mobx中的计算属性computed的使用

注意：computed具有内置缓存，也就是说无论是用几次都只会执行一次

// 定义
class Computed{
    constructor(){
        makeObservable(this,{
            count:observable,
            triple:computed
        })
    }
    count=0
    get triple(){
        return this.count*3
    }
}
// 使用
import store from "./store/Computed"
<div>computed的使用{store.triple}</div>

Mobx中的监听属性：autorun || reaction

二者的区别:autorun创建时就执行一次，而reaction只在值变化时执行
    autorun:接受一个函数，函数图内容随意，只要里面出现的变量发生了变化就会执行autorun
    reaction(()=>{待监测变量},(value,oldvalue)=>{操作})，接收两个参数，第一个参数规定监听谁，第二个参数操作，并接收实参

    // autorun用法
    import {autorun,makeAutoObservable,reaction} from "mobx"
    class Autorun{
        constructor(){
            makeAutoObservable(this)
        }
        demo=1,
        demoincrement(){
            this.demo++
        }
    }
    const run = new Autorun()
    autorun(()=>{
        console.log(run.demo)
    })
    // reaction用法
    reaction(()=>run.demo,(value,oldvalue)=>{console.log(value,oldvalue)})

Mobx中的异步处理

注意：mobx本身就可以处理异步，但是注意mobx中的状态改变必须和action绑定，因此建议新建一个函数功能为异步，但是处理的是改变状态的action。如下

    // 处理异步方法一：
    increment(){
        this.count++
    }
    incrementAsync(){
        setTimeout(this.increment,1000)
    }
    // 处理异步方法二：
    import {runInAction} from "mobx"
    increment(){
        setTimeout(()=>{
            runInAction(()=>{
                this.count++
            })
        })
    }

Mobx的模块化开发

// 创建根store模块，并引入分支模块挂载到根模块中
import { createContext, useContext } from "react"
import cart from "./Cart"
import counter from "./Counter"
class RootStore {
    cart = cart
    counter = counter
}

const store = new RootStore()

// 创建一个上下文对象，用于跨组件通信
// 次数createContext传入了初始默认值则不用提供provider
const Context = createContext(store)

// 创建一个自定义hook，useStore
export default function useStore() {
    return useContext(Context)
}
// 使用
import useStore from "对应路径"

const {cart,counter} = useStore()