React Native中Mobx的使用方法详解


Posted in Javascript onDecember 04, 2018

前言

从今天开始我们来搞搞状态管理可否,这几天没怎么写博客,因为被病魔战胜了,tmd,突然的降温让我不知所措,大家最近注意安全,毕竟年底了,查的严,呸,大家注意保暖

特别声明:写该文只是写一下用MobX的思路,有很多地方我会直接放官网链接,因为官网已经写的够详细了

首先来个比较简单的,MobX。

引用官网上的一句话:

MobX 是一个经过战火洗礼的库,它通过透明的函数响应式编程(transparently applying functional reactive programming - TFRP)使得状态管理变得简单和可扩展。MobX背后的哲学很简单:

MobX 是一款精准的状态管理工具库,对我来说非常容易学习和接受。我在 React 和 React Native 应用中使用过 Flux、Alt、Redux 和 Reflux,但我会毫不犹豫地说,MobX 的简单性立即成为了我最喜欢的状态管理工具。我期望能将它运用在未来的项目中,并且对 MobX 的发展拭目以待。

任何源自应用状态的东西都应该自动地获得。其中包括UI、数据序列化、服务器通讯,等等。

上官网的图

React Native中Mobx的使用方法详解

环境我就不配了,官网给了详细的教程,我的环境是RN+TS,这里需要特别注意一下,由于Mobx要用的装饰器,如果单纯的用create-react-app安装好环境后,一定要特别特别注意:

此时使用@observable是不行的,因为不支持装饰器语法,

此问题有两种解决方案:1.在当前环境中设置支持装饰器,

 下面是官网的详细配置链接,https://cn.mobx.js.org/best/decorators.html

  2.使用MobX的内置的 decorate  工具在不支持装饰器语法的情况加使用

接下来下面给你吃,不是,下面我用一个小例子来演示一下,Go,Go,Go(注意,我这里面默认装饰器是可用的,因为我环境配好了已经)

1.yarn add mobx 

2.首先我们状态管理肯定会有一个仓库吧,那我们来建一个仓库,(注意:我创建了两个小的分支,因为状态管理总不可能怼到一个文件里面吧)

首先上一手仓库的结构

React Native中Mobx的使用方法详解 

home.tsx的代码

注意:1. 从mobx中引入observable,action

 2.用装饰器修饰仓库的数据

 3.导出时需要new一下

import { observable, action } from 'mobx'


class List {
 @observable isShowMap: boolean = false

 @action
 switchTab (info: boolean) {
 this.isShowMap = info
 }
}

export default new List()

list.tsx的代码

注意:1.此处多加入了runInAction,不加此属性当然也可以,但是就不会记录时间旅行了

import { observable, action, runInAction } from 'mobx'

class List {
 @observable listData: Array<any> = []

 @action
 getListData () {
 fetch('https://ik9hkddr.qcloud.la/mock/cookbook-list.json')
  .then(reponse => reponse.json())
  .then(result => {
  runInAction(() => {
   this.listData = result.data
  })
  })
 }
}

export default new List()

index.js的代码

注意:在此处将两个树枝里面的数据都引入,合并到一起

import list from './list'
import home from './home'
const store = { list, home }
export default store

3.将仓库绑定到根组件上

     注意:在此引入Provider将仓库和根组件绑定

import React from 'react'
 import { Provider } from 'mobx-react'
 import Home from './pages/home/Home'
 import HotList from './pages/hotlist/HotList'
 import store from './store' 

export default class componentName extends React.Component {
 render() {
 return (
  <Provider store={store}>
  <RootStack></RootStack>
  </Provider>
 )
 }
}}

4.最后一步,在组件中引用仓库里的数据,并可以修改仓库里的数据

  注意:1.引入observer和inject,将组件和仓库连接起来,类似于在React中使用react-redux中的connnect方法

import React from 'react'
import { observer, inject } from 'mobx-react'
import {
 View,
 Text,
} from 'react-native'

interface Props {
}
interface State {
}
//此处时引用最重要的步骤用inject和observer
@inject('store')
@observer
export default class Home extends React.Component<Props, State> {
 render () {
 return (
  <View>
  {/* 引用store里面储存的值 */}
  <Text>{this.props.store.home.isShowMap}</Text>
  </View>
 )
 }
 componentDidMount () {
 //调用函数修改store里面的值
 this.props.store.home.switchTab(value)
 }
}

到这里,今天的随笔已经结束了,可能写的不是那木有条理,若有错误还往各位同学指出,我嗓子已经说不出话来了,所以在这提醒各位同学

 学技术的同时一定要记得锻炼身体,我的天,少吃饭多吃药,多打代码多保健,活着最重要!

 总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
利用javascript移动div层-javascript 拖动层
Mar 22 Javascript
js实现在同一窗口浏览图片
Sep 17 Javascript
谈谈js中的prototype及prototype属性解释和常用方法
Nov 25 Javascript
js实现数组冒泡排序、快速排序原理
Mar 08 Javascript
jquery.cookie.js实现用户登录保存密码功能的方法
Apr 15 Javascript
第七篇Bootstrap表单布局实例代码详解(三种表单布局)
Jun 21 Javascript
Vuejs 页面的区域化与组件封装的实现
Sep 11 Javascript
jQuery实现轮播图及其原理详解
Apr 12 jQuery
基于webpack4+vue-cli3项目实现换肤功能
Jul 17 Javascript
jQuery实现轮播图效果
Nov 26 jQuery
JS数据类型判断的几种常用方法
Jul 07 Javascript
Ajax实现页面无刷新留言效果
Mar 24 Javascript
element ui table(表格)实现点击一行展开功能
Dec 04 #Javascript
elementUI中Table表格问题的解决方法
Dec 04 #Javascript
zepto.js 实时监听输入框的方法
Dec 04 #Javascript
vue 之 css module的使用方法
Dec 04 #Javascript
Vue源码解析之数组变异的实现
Dec 04 #Javascript
小程序指纹验证的实现代码
Dec 04 #Javascript
js实现下拉框二级联动
Dec 04 #Javascript
You might like
PHP.MVC的模板标签系统(五)
2006/09/05 PHP
用PHP控制用户的浏览器--ob*函数的使用说明
2007/03/16 PHP
浅析get与post的一些特殊情况
2014/07/28 PHP
PHP关联数组实现根据元素值删除元素的方法
2015/06/26 PHP
php加密之discuz内容经典加密方式实例详解
2017/02/04 PHP
微信第三方登录(原生)demo【必看篇】
2017/05/26 PHP
通过PHP实现用户注册后邮箱验证激活
2020/11/10 PHP
javascript数字格式化通用类 accounting.js使用
2012/08/24 Javascript
多次注册事件会导致一个事件被触发多次的解决方法
2013/08/12 Javascript
JavaScript中用于四舍五入的Math.round()方法讲解
2015/06/15 Javascript
不同js异步函数同步的实现方法
2016/05/28 Javascript
jquery输入数字随机抽奖特效的简单实现代码
2016/06/10 Javascript
jquery实现上传文件大小类型的验证例子(推荐)
2016/06/25 Javascript
Query常用DIV操作获取和设置长度宽度的实现方法
2016/09/19 Javascript
使用Promise链式调用解决多个异步回调的问题
2017/01/15 Javascript
webpack进阶——缓存与独立打包的用法
2017/08/02 Javascript
基于vue 动态加载图片src的解决方法
2018/02/05 Javascript
web前端页面生成exe可执行文件的方法
2018/02/08 Javascript
vue-cli 如何打包上线的方法示例
2018/05/08 Javascript
微信小程序使用map组件实现检索(定位位置)周边的POI功能示例
2019/01/23 Javascript
详解微信小程序开发用户授权登陆
2019/04/24 Javascript
JS错误处理与调试操作实例分析
2020/04/13 Javascript
一文读懂vue动态属性数据绑定(v-bind指令)
2020/07/20 Javascript
[03:37]2016完美“圣”典 风云人物:Mikasa专访
2016/12/07 DOTA
[56:13]DOTA2-DPC中国联赛定级赛 LBZS vs Phoenix BO3第一场 1月10日
2021/03/11 DOTA
matplotlib绘制动画代码示例
2018/01/02 Python
Python调用SMTP服务自动发送Email的实现步骤
2021/02/07 Python
H5混合开发app如何升级的方法
2018/01/10 HTML / CSS
Linux文件系统类型
2012/02/15 面试题
日期和时间问题
2015/01/04 面试题
车间统计员岗位职责
2014/01/05 职场文书
安全生产投入制度
2014/01/29 职场文书
公司开会通知
2015/04/20 职场文书
运动会广播稿300字
2015/08/19 职场文书
剖析后OpLog订阅MongoDB的数据变更就没那么难了
2022/02/24 MongoDB
Mysql中@和@@符号的详细使用指南
2022/06/05 MySQL