React Mobx 基础使用_0.1 react.js

组件通信

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

### mobx
会有一个单独的js文件进行管理
父组件数据注入 Provider
子组件（任意组件）

【React Mobx 基础使用_0.1】安装
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 = {};

解决方法

-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. 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
1. 从this.props上解构使用
函数组件