mobx是一个非常好用且简单易懂的状态管理工具。先把这个案例作为一个TODOlist案例说一下。使用antd风格，用mobx进行状态管理的具体效果如下项目案例源码：https://github.com/xiaqijian/react-mobx-demo1。初始化项目第一步是用create-react-app初始化一个项目，打开webpack配置项npxcreate-react-appreact-mobx-democdreact-mobx-demonpmruneject2。配置支持修饰符目前初始化的项目不支持修饰符，安装依赖cnpminstall--save-dev@babel/plugin-proposal-decoratorscnpminstall--save-dev@babel/plugin-proposal-class-properties后如上安装，找到项目中的package.json文件，修改如下....."babel":{//添加"plugins":[["@babel/plugin-proposal-decorators",{"legacy":true}],["@babel/plugin-proposal-class-properties",{"loose":true}]],"presets":["react-app"]},找babel添加插件即可！3、安装antd和mobx没有什么特别的，安装yarnaddantdyarnaddmobxyarnaddmobx-react4即可。修改src目录下的文件，新建todolist.js和mobx。..最终目录如下贴代码mobx/index.js代码import{observable,action,computed}from'mobx'classStore{@observableInputvalue=''@observablelistdata=['2222223344','222223344','2222223344','2222223344','2222223344']@actionchangeInput(value){this.Inputvalue=value//console.log(value)}@computedgettodolen(){returnthis.listdata.length}@actionaddTodo(){this.listdata=[this.Inputvalue].concat(this.listdata)//让arr=this.listdata//this.listdata=arr.unshift(this.Inputvalue)this.Inputvalue=""console.log(this.Inputvalue)}@actiondeletodo(index){this.listdata.splice(index,1)}}exportdefaultnewStore()Todolist.js代码importReact,{useEffect}from'react'import{Button,Input,List}from'antd'import{inject,observer}from'mobx-react'//constdata=[//'22222',//'22222',//'22222',//'22222',//'22222'//]constTodolist=inject("store")(观察r(({store})=>{useEffect(()=>{console.log(store)})return(
