关于react.js:React-Mobx-基础使用01

组件通信

props
context
redux mobox
任意组件间的数据通信

### mobx

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

子组件（任意组件）

装置
yarn add mobx
npm install mobx --save
1. 有一个包

父级的入口治理

引入 mobx-react 应用Provider
引入store.js 中的文件（可能是多个）
new Store()
增加 - 引入一个新的store
- stores={
newStore:new NewStore()，
}
应用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：
```
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 数据

类组件
须要的子页面应用

import { withRouter } from 'react-router-dom';//1. 引入
import { observer,inject } from 'mobx-react';
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

从this.props上解构应用

函数组件