状态管理之Mobx学习

前言：对mobx的学习笔记

什么是mobx

简单来说就是一个状态管理库，比redux好理解，简单

mobx概念

• state 状态

定义的数据，只要被observable接管，mobx就可以跟踪

• actions 动作

修改state的数据的方法被称为action

• Derivations 派生动作

任何 来源是State(状态) 并且不需要进一步交互的东西都是 Derivation(派生)。

mobx工作流程

非常简单，我目前总结了 以下几点，后期学习到了再补充

1. 利用action改变state
2. 这个state需要被observable
3. 然后state变化后，更新视图

安装

对于react的使用者大致可以分三类

• mobx核心库
• mobx-react 适用于react函数和类组件
• mobx-react-lite 适用于react函数组件

目前的话笔者喜欢使用函数组件，故使用npm install mobx mobx-react-lite安装相应库

使用

import { action, makeObservable, observable,flow,computed } from "mobx";
class Counter {
  constructor() {
    this.count = 0;
    makeObservable(this, {
      count: observable,
      increment: action.bound, // 强制绑定this为当前对象
      decrement: action.bound,
			loadNum: flow, // 异步方法使用flow包裹
			doubleCount: computed // 派生状态，类似vue里的computed
    });
  }
  increment() {
    this.count++;
  }
  decrement() {
    this.count--;
  }
	*loadNum() {
    const res = yield axios.get("http://localhost:3000/getdata");
    this.count = res.data;
  },
	get doubleCount() {
    return this.count * 2;
  }
}

export default Counter;

需要对需要进行mobx管控的组件使用obersver监听，这样在数据变化的时候会进行更新视图

import { observer } from "mobx-react-lite";
function count({store}) {
  return (
    <div>
      <button onClick={store.increment}>increment</button>
      <span>{store.count}</span>
      <button onClick={store.decrement}>decrement</button>
    </div>
  );
}

export default observer(count);

runInAction

包裹后的函数变为一个action

监控数据变化

autorun

类似vue里的watcheffect

useEffect(() => {
	autorun(() => {
		consolre.log(store.count)
	})
},[])

reaction

类似vue的watch用法

useEffect(() => {
	reaction(
		() => store.count,
		(cur,prev) => {
			console.log(cur,prev)
		}
	)
},[])

未完

好家伙，道生一,一生二,二生三,三生万物，这玩意和vue3咋这么像🤣🤣