最简洁的Mbox6.x使用基本步骤介绍（只需三步）！！！

首先安装：yarnaddmobxmobx-reactornpmimobxmobx-react--save-dev1.创建mobx仓库方法一：使用@observable装饰器import{makeObservable,observable,action,computed}from"mobx";classA{//声明状态@observablelist=[{id:1,name:"zhangsan",age:3},{id:2,name:"jack",age:18},];constructor(){/在/mbox6之后，需要添加这个组件来更新makeObservable(this);}//Action修改状态的action@actionaddList(item){this.list=[item,...this.list];}/*计算属性（最好通过解构获取值，这样mobx可以检测到这个值是否是自己的值变化，从而触发当前的计算）当数据发生变化时，会自动执行。如果页面没有引用它，即使内部引用的值发生变化，也不会执行*/@computedgetlistTotal(){const{list}=this;返回列表长度；}}方法二：不带@observable装饰器import{makeObservable,observable,action,computed}from"mobx";classA{list=[{id:1,name:"zhangsan",age:3},{id:2,name:"jack",age:18},];constructor(){//mobx6和之前的版本这是最大的区别官方案例https://mobx.js.org/observable-state.htmlmakeObservable(this,{list:observable,addList：动作，listTotal：计算，}）；}addList(item){this.list=[item,...this.list];}getlistTotal(){const{list}=this;返回列表长度；}}二、传递mobx仓库（完成App组件的供给）//需要使用Provider完成App组件的数据供给，让所有后代组件共享mobx仓库import{Provider}from"mobx-react";importStorefrom"./store/A.js";conststore=newStore();ReactDOM.render({/*如果这里声明所有的store都存储在xxx属性上，那么如果你想要在组件中使用mobx，必须注入xxx示例：@inject("storeAAA")*/},document.getElementById("root"));UsemobximportReact,{Component}from"react";//通过inject注入store；通过observer开启组件观察模式，在监听到mobx数据变化时触发组件中Ui对应部分的渲染//@inject注入名称：Provider传入store的属性值@inject("storeAAA")@observerclassindexextendsComponent{constructor(props){super(props);this.nameNode=React.createRef();这个.ageNode=React.createRef();}//添加addList=()=>{const{storeAAA}=this.props;//使用mobx仓库声明的action方法storeAAA.addList({id:nanoid(),//RandomIdname:this.nameNode.current.value,age:this.ageNode.value,});};render(){console.log("AProps=>",this.props);const{storeAAA}=this.props;return(姓名：年龄：(this.ageNode=e)}/>点击添加{/*使用状态mobx仓库中声明的列表*/}

{storeAAA.list.map((v)=>{return({v.name}-----{v.年龄});})}