React mobx 基础使用

Posted p71a3fj5

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React mobx 基础使用相关的知识,希望对你有一定的参考价值。

组件通信

  1. props
  2. context
  3. redux mobox
    任意组件间的数据通信

### mobx

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

子组件 (任意组件)

  1. 安装
    yarn add mobx
    npm install mobx --save

    1. 有一个包

父级的入口管理

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

    在类组件的上面

    // 1.引入需要的模块
      import { withRouter } from \'react-router-dom\';//1. 引入
      import { observer, inject } from \'mobx-react\';
    //2.使用引入的模块
      @withRouter
      @inject(\'FirstStore\',)//多个之前需要,号隔开
      @observer
    
    1. 从this.props上解构使用
  2. 函数组件

    使用时父级的入口管理不变;

子组件使用 读取值;

  1. import { withRouter } from \'react-router-dom\'; //用来连接router更新数据的
  2. import { observer, MobXProviderContext } from \'mobx-react\';// 用来
  3. function useStores(name) {

    return React.useContext(MobXProviderContext)[name]
    }
    ===  上面方法等价于下面的这个
    react.useContext(MobXProviderContext).FirstStore;
    
  1. 导出时先试用 observable()包裹组件,然后再用WithRouter在包裹

    export default withRouter(observable( View ))
    

mobx 文档解构

mobx 步骤
<!--
1.引入mobx
  1. 定义一个Class类 在外面调用
  2. 使用 observable 来定义 数据
  3. 使用 observer 与页面进行关联
  4. 使用 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\')//多个之前需要,号隔开
@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 mobx 基础使用的主要内容,如果未能解决你的问题,请参考以下文章

React Mobx 基础使用_0.1

使用 mobx-react-stores 开发 react 应用

Jest/React/Mobx:TypeError mobxReact.observer 不是函数

前端开发日常 - 7简单粗暴,在React中快速使用Mobx

从零开始搭建一个 React + Mobx + React Router 脚手架

react生命周期函数使用箭头函数,导致mobx-react问题