React mobx 基础使用

组件通信

1. props
2. context
3. redux mobox
   任意组件间的数据通信

### mobx

会有一个单独的js文件进行管理
父组件 数据注入 Provider

子组件 （任意组件）

1. 安装
   yarn add mobx
   npm install mobx --save

   2. 有一个包

父级的入口管理

1. 引入 mobx-react 使用Provider

2. 引入store.js 中的文件 （可能是多个）
   new Store()

   添加 - 引入一个新的store

   • stores={

   newStore:new NewStore()，
   }

3. 使用Provider 注入 { ...stores }

### 报错

由于mobx 不支持@语法所以会报错

// import {observable, computed, action} from 'mobx';
3 | class Store {
> 4 |   @observable tradeCfg = {
  |   ^
5 |     'sadf': 'sadf'
6 |   };
7 |   @observable baseInfo = {};

1. 解决方法

   -  1：

   yarn add @babel/plugin-proposal-decorators
   yarn add @babel/plugin-proposal-class-properties

   -  2：在package.json中 找到 babel下的  presets 替换代码
   

    
      "presets": [
        ["react-app"],
        ["@babel/preset-react"]
    ],
    "plugins": [
        ["@babel/plugin-proposal-decorators", {"legacy": true }],
        ["@babel/plugin-proposal-class-properties", { "loose" : true }]
    ]

如何在页面中读取 mobx 数据

1. 类组件
   需要的子页面使用

   1. import { withRouter } from 'react-router-dom';//1. 引入
   2. import { observer,inject } from 'mobx-react';

   在类组件的上面

   // 1.引入需要的模块
     import { withRouter } from 'react-router-dom';//1. 引入
     import { observer, inject } from 'mobx-react';
   //2.使用引入的模块
     @withRouter
     @inject('FirstStore',)//多个之前需要，号隔开
     @observer
   

   4. 从this.props上解构使用

2. 函数组件

   使用时父级的入口管理不变；

子组件使用 读取值;

1. import { withRouter } from 'react-router-dom'; //用来连接router更新数据的
2. import { observer, MobXProviderContext } from 'mobx-react';// 用来

3. function useStores(name) {

   return React.useContext(MobXProviderContext)[name]
   }
   ===  上面方法等价于下面的这个
   react.useContext(MobXProviderContext).FirstStore;
   

4. 导出时先试用 observable()包裹组件，然后再用WithRouter在包裹

   export default withRouter(observable( View ))
   

mobx 文档解构

mobx 步骤

  // mobx 文件解构
  import { observable, computed, action, autorun, runInAction, makeObservable } from 'mobx'

  // 有一个类 
  class Store{
    @obserbable  name='小张'; //用 @obserbable 来定义数据  【基本数据类型，复合数据类型】
    @action  //使用 @action 来定义方法 
      fn=(text)=>{
        this.name=text
      }
  }

export default Store;

在页面上修改mobx 的数据

类组件 修改mobx

import { observer,inject } from 'mobx-react';
@withRouter
@inject('FirstStore','SecondStore')//多个之前需要，号隔开
@observer
class View extends Component {
   
  static contextType = DataContext;

   render() {
     console.log('assssssssssss', this.props)
     const { FirstStore,SecondStore } = this.props// 读取方法
    //  console.log(FirstStore,'aaaaaaaaaaaaaaaaaaaaaaaa')
     this.props.SecondStore.fn()
     const { fn, name } = this.props.SecondStore;//从你生成的实例对象中【SecondStore】解构store.js中你使用action定义方法，
    return (
      

      
        {fn('狗狗萌')} 
        {name}
        {fn('小琪')}}>safdsf  
        //调用actions定义的方法来修改 observable 的值
       {FirstStore} 
      
    )
  }
}
export default View

在修改值的过程中会发现 打印的数据修改了但是页面上的数据并没有改变

解决方案 store.js中加入
constructor() {

  makeObservable(this);
}

import { observable, computed, action, autorun, runInAction, makeObservable } from 'mobx';

class Store {
 @observable name = '小张'

 constructor() {
   makeObservable(this);//解决了打印内容修改 ， 但是页面为改变内容的为改变
 }
 // 方法一 makeObservable(this)
 // 方法二  @action.bound

 @action//.bound //用来声明的函数
 fn = (text) => {
   this.name = text
 }


}
export default Store;