关于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}]
    ]

类组件
须要的子页面应用

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 步骤
<!–
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

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

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

父级的入口治理

如何在页面中读取 mobx 数据

mobx 文档解构

在页面上批改 mobx 的数据

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

父级的入口治理

如何在页面中读取 mobx 数据

mobx 文档解构

在页面上批改 mobx 的数据

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

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