React Mobx 基础使用_0.1

Posted 2021-09-03 p71a3fj5

组件通信

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 = {};

<!-- 解决方案：
  yarn add @babel/plugin-proposal-decorators
  yarn add @babel/plugin-proposal-class-properties
 -->

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\';
   3. 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. 函数组件