react 中 mobx的用法

1. 新建一个mobx.jsx文件

   import { useContext } from "react"
   import MyContext from '../../utils/Context'
   //引入Observer监听组件  实现数据和视图层的双向改变
   import { Observer } from 'mobx-react'
   
   const Mobx = () => {
       //hook有规则  useContext只能在组件里面用
       const store = useContext(MyContext);
   
       return (
           <Observer>
               {() => {
                   return (
                       <div>
                           <p>我是Mobx的应用</p>
                           <ul>
                               <li>mobx组件</li>
                               <li>使用mobx 的数据 msg === {store.msg}</li>
                               <li>使用mobx 的数据 number === {store.number}</li>
                               <li>使用mobx 的数据 str === {store.str}</li>
                               <li>mobx的计算属性 1 ： {store.double}</li>
                               <li>mobx的计算属性 2 ： {store.tatal}</li>
                               <button onClick={() => { store.changeNum() }}>改变munber</button>
                               <button onClick={()=> {store.changeStr('柳林')}}>改变str</button>
     
                           </ul>
                       </div>
                   )
               }}
           </Observer>
   
       )
   }
   
   export default Mobx
   

2. 新建一个store文件夹 ---- 下面一个index.js文件

   //仓库文件  放所有的状态. 数据 
   import { makeAutoObservable, runInAction, autorun, reaction } from "mobx"
   
   function createDoubler(value) {
   
       return makeAutoObservable({
   
           //这是放状态的
           msg: '我是公共数据',
           number: 20,
           str: '程小小',
           value,
   
           //关键字 get 就代表这是一个计算属性 函数内部必须要返回一个值
           get double() {
               return this.number * 2
           },
   
           //get 计算属性可以有多个
           get tatal() {
               return this.str + this.number
           },
   
           //actions  所有的方法 方法内部   内部可以放异步操作
           changeNum() {
               console.log('changeNum 函数执行了');
   
               //异步操作会报警号 ，但是不会报错  解决方法：用runInaction包起来
   
               setTimeout(() => {
                   //如果action里面用了异步 ，最好将你异步里面改变state的那步操作 用runInaction包起来 ，可以优化一下
                   runInAction(() => {
                       this.number++
                   })
   
               }, 2000)
           },
   
           changeStr(v) {
               this.str = v;
   
           }
   
       })
   }
   
   let store = createDoubler()
   
   //autorun 类似于监听  和可以写在组件里面
   autorun(() => {
       let a = store.number;
       console.log('autorun 执行了');
   })
   
   //Reaction 指定你要监听的东西  和监听的作用一样
   reaction(() => store.number, () => {
       console.log('reaction 函数执行了');
   })
   
   
   //导出一个对象
   export default store
   

3. 新建一个context.jsx文件

   //把 创建context提出去
   import { createContext } from 'react'
   
   const MyContext = createContext()
   
   export default MyContext