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

组件通信

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';

在类组件的下面

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

从this.props上解构应用

函数组件
应用时父级的入口治理不变；

子组件应用读取值;

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

function useStores(name) {

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

导出时先试用 observable()包裹组件，而后再用WithRouter在包裹
```
export default withRouter(observable( View ))
```

mobx 文档解构

mobx 步骤
<!--
1.引入mobx

定义一个Class类在里面调用
应用 observable 来定义数据
应用 observer 与页面进行关联
应用 action 批改咱们的数据

【ovserver】页面中进行读取，批改的操作

定义state （）相当于state 定义根底数据类型与复合数据类型
-->

  // 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')//多个之前须要，号隔开@observerclass 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 (      <div>              {fn('狗狗萌')}         {name}        <button onClick={()=>{fn('小琪')}}>safdsf </button>         //调用actions定义的办法来批改 observable 的值       {FirstStore}       </div>    )  }}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;

父级的入口治理

如何在页面中读取 mobx 数据

mobx 文档解构

在页面上批改mobx 的数据

在批改值的过程中会发现 打印的数据批改了然而页面上的数据并没有扭转

在批改值的过程中会发现打印的数据批改了然而页面上的数据并没有扭转