mobx在react如何使用

这边文章主要目的呢。是搭建一个react和mobx的demo。能够了解mobx在react应用中如何使用的。我会用大白话的形式写这个文章;
文末有react 和react-native 的两个集成mobx的项目demo。react-native的实现思路和下面一样。
1.create-react-app创建react项目
脚手架命令生成一个项目:

1.create-react-app react_mobx
//创建好脚手架安装mobx和mobx-react 包
2. npm install mobx mobx-react --save
3. npm install react-router --save

安装好上面依赖。我们修改下项目结构----大家可以自行修改下;

在这里插入图片描述
2.实现react-router功能
大家都知道mobx可以解跨页面共享数据的问题。那我们先实现跳转页面功能;我们先修改下下面几个文件–
1.home.jsx

import React, { Component } from "react";
 class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    return (
      <div>
        <h1>首页</h1>
        <button onClick={() => { this.props.history.push("/one");}}>
         跳转到第一个页面
        </button>
      </div>
    );
  }
}
export default Home

2.one.jsx

import React, { Component } from "react";
class One extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    return (
      <div>
        <h1>页面一</h1>
        <button onClick={() => { this.props.history.push("/");}}>
         跳转到首页
        </button>
      </div>
    );
  }
}
export default One

3.router.jsx

import React, { Component, Fragment } from "react";
import { HashRouter,Route } from "react-router-dom";
import Home from '../page/home';
import One from '../page/one';
class Router extends Component {
  render() {
    return (
      <HashRouter>
        <Fragment>
          <Route exact path={`/`} component={Home} />
          <Route path={`/one`} component={One} />
        </Fragment>
      </HashRouter>
    );
  }
}
export default Router;

4.index.js 文件入口

import React from 'react';
import ReactDOM from 'react-dom';
import Router from './router/router';
ReactDOM.render(<Router />, document.getElementById('root'));

好了文件修改完毕~ npm start 一下,页面是不是可以自由跳转了呢~ 好了 实现了这个我们就进行下一步吧
重要提醒–MobX采用的是ES7的装饰器语法,目前还是一种实验性的语法,使用 create-react-app 脚手架默认创建的项目是没有开启装饰器语法的。需要一些额外的配置查看下这篇文章:create-react-app配置修饰器
可能这个方法比较麻烦-----我现在解决方案是这个–有好的办法 我会及时更新的~

3.mobx和mobx-react的使用
3.1需要项目结构src下增加一个store文件夹
–这个文件夹的作用。我们理解为专门存放和管理数据源的地方;
在这里插入图片描述
创建3个js文件- homeStore.js、oneStore.js、index.js 下面对每个文件夹进行添加代码
homeStore.js: 存放一个页面数据源的类

import { observable} from "mobx";
class HomeStore {
  @observable homeNum = 0;
}
export default HomeStore;

oneStore.js: 存放一个页面数据源的类

import { observable} from "mobx";
class OneStore {
  @observable oneNum = 3333;
}
export default OneStore;

index.js: 将多个store融合到一个对象里面

import HomeStore from "./homeStore";
import OneStore from "./oneStore";
let oneStore = new OneStore();
let homeStore = new HomeStore();
const stores = {
  oneStore,
  homeStore
};
/// 默认导出接口
export default stores;

这些文件夹创建的意义是什么呢。其实一个xxxStore的话 就是一个数据源的地方。每个类里面可以定义我们需要用到的数据-就和我们react中state一样;index.js的作用呢 就是把所有数据整合到一块去-- 其实也是为了下面一部做铺垫的;

3.2 项目入口index.js部分代码修改
index.js

import React from "react";
import ReactDOM from "react-dom";
import Router from "./router/router";
import { Provider } from "mobx-react";
import stores from "./store";
ReactDOM.render(
  <Provider {...stores}>
    <Router />
  </Provider>,
  document.getElementById("root")
);

这边我们引入 Provider 和上面提及到的store 。这边其实就是一个数据容器,也是mobx这一类数据流框架实现数据共享的基础。我们子组件放在这个数据容器当中。mobx才可以做到跨组件数据共享Provider 这个其实不陌生了。其实就是react中context 中的属性–自己写的关于react Context的文章 不了解的同学可以学习一下。

3.3 page/home.jsx 的代码修改
既然Provider是数据容器。我们子组件在容器里面。那我们子组件是如何使用容器里面的数据呢–看一下下面代码

import React, { Component } from "react";
+ import { observer, inject } from "mobx-react";
+ @inject("homeStore")
+ @observer
class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    return (
      <div>
       +  <h1>首页数据源的number为:{this.props.homeStore.homeNum}</h1>
        <button onClick={() => {  this.props.history.push("/one") }}> 
            跳转到第一个页面
        </button>
      </div>
    );
  }
}
export default Home;

代码中+就是新添加的代码 。下面介绍一下我们用到的几个熟悉吧
observer:将你的组件变成响应式组件。就是数据改变时候可以出发重新的渲染。
inject(homeStore):和redux的connect作用一样,将数据注册到组件。homeStore其实就我们store/index中 new出来的实例名称;
this.props.homeStore.xxx:这个就是如何使用数据源中的值.就和组件透传一样
在这里插入图片描述
3.4 数据源如何修改?
既然上文我们实现了数据的展示,那么当然少不了操作数据的操作-我们就进行下一个操作
@action:请求的意思-在严格模式下。这是唯一操作store的操作;
+代表新增代码

修改store/homeStore.js 修改数据源

//homeStore.js
import { observable,action} from "mobx";
class HomeStore {
  @observable homeNum = 0;
  + @action addNum() {
  +  this.homeNum += 1;
  + }
  + @action lessNum() {
  +  this.homeNum -= 1;
  + }
}
export default HomeStore;

修改page/home.jsx 展示增加操作按钮 store里面定义的@action这边就用this.props.home.addNum()操作就可以了

  render() {
    return (
          //代码自行添加。。。。。。
    +  <div>
    +   <h1>首页数据源的number为:{this.props.homeStore.homeNum}</h1>
    +    <button onClick={() => {this.props.homeStore.addNum()}} >
    +      点击添加
    +    </button>
    +    <button  onClick={() => {this.props.homeStore.lessNum()}}>
    +     点击删除
    +    </button>
    +  </div>
    //代码自行添加。。。。。。
    );
  }
}
export default Home;

3.5 共享的数据怎么使用?
展示和修改的操作都完成了–那么我们下一步应该是mobx共享数据了。如何实现数据共享呢。其实很简单 我们直接看代码-在我们需要用到的数据源页面上加上@inject(“homeStore”) 就可以了—当然修改共享数据 也是

import React, { Component } from "react";
import { observer, inject } from "mobx-react";
@inject("homeStore")
@inject("oneStore")
@observer
class One extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    return (
      <div>
        <h1>页面一</h1>
          <h1>首页数据源的number为:{this.props.homeStore.homeNum}</h1>
        <h1>oneStore的number为:{this.props.oneStore.oneNum}</h1>
        <button onClick={() => { this.props.history.push("/");}}>
         跳转到首页
        </button>
      </div>
    );
  }
}
export default One

去第二个页面查看一下数据展示:
在这里插入图片描述
这样一套流程结束啦~

4.严格模式的设置
如果我们不适用严格模式的话。你可以有这么一个骚操作;在页面中使用下放代码:

this.props.homeStore.homeNum = 33;

你会发现你的数据源数据被修改过了~很方便对吧。but这是很危险的操作 数据源就变得不可追溯了~ 那么如何设置的-也是很简单的啦~
项目入口index.js

+ import { configure } from "mobx";
//代码自行增加
render(
  <div>
    <Provider {...stores}>
      <XXX />
    </Provider>
  </div>,
  document.getElementById("root")
);
//5.x版本严格模式开启方式
+ configure({
+  enforceActions: "observed"
+ });

bug总结
mobx数据变了,视图没变,mobx6的用法

在react中使用react-mobx的情况下,数据已经被action 改变了,但是视图层 没有随之改变

如果mobx的版本大于6

切记添加 makeObservable 初始化项目,makeObservable 初始化后就可以改变

import { observable, action, computed, makeObservable } from "mobx";


export class AuthStore {
    @observable name = 'wangkai000';
    @observable sex =  '男';
    @observable userObj = {
        name: 'wangkai000',
        age: 233,
        token: '12345689'
    }

    constructor() {
        // makeObservable 在mobx6 版本之后 比添加项
        makeObservable(this);
        
    }

    @action.bound
    setName(v) {
        console.log('触发action');
        this.name = v;
        
    }
    

    @computed get titleName(){
        return this.name+'___111';
    }
   
    
}

mobx在react hooks中的使用

1,创建方法同上,只是使用方法不一样
2,使用方法

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
子组件中使用mobx
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

  • 8
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值