mbox介绍

简单、可扩展的状态管理，它通过透明地应用函数式反应编程使状态管理变得简单和可伸缩

跟redux一样，都是用来管理应用状态的工具，不管使用起来比redux简单的多

技巧

解决了数据更新界面不重新渲染问题

简化了开发模式

简单使用

下载依赖

npm i mobx mobx-react  /  yarn add mobx mobx-react

 开始使用

过去我们需要通过装饰器（@observable，@action）来创建状态和方法

现在直接声明即可

makeAutoObservable 介绍

makeAutoObservable(target, overrides?, options?)

target：将目标对象中的属性和方法设置为 Observable State 和 Action

后面两个参数目前没有使用到需要的小伙伴可以自己再查一下

第一步：创建仓库

建立一个store

import { makeAutoObservable } from 'mobx';

class Store {
  constructor() {
    makeAutoObservable(this)
  }
  // 被观察者
  name = '我是初始值';
  // 定义的方法
  myFc = () => {
    this.name = "abc" + Math.random()
  }
}
export default new Store()

开始操作，创建一个页面

observer

observer 函数/装饰器可以用来将 React 组件转变成响应式组件。 它用 mobx.autorun 包装了组件的 render 函数以确保任何组件渲染中使用的数据变化时都可以强制刷新组件。 observer 是由单独的 mobx-react 包提供的。
 

import { Button } from 'antd';
import { observer } from 'mobx-react';  // 引入
import Store from './store'
const TestComponent = () => {
  return <div>
    {Store.name}   // 直接使用
    <Button onClick={() => {
      Store.myFc()           // 调用他的方法
    }}>操作</Button>
  </div>
};
export default observer(TestComponent)  // 高阶组件用来监视组件

 效果图

 结果

 

 由于时间仓促没有过多的研究，不过已足够目前使用，后期会仔细研究，并出详细教程