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 相关文章推荐
AJAX异步从优酷专辑中采集所有视频及信息(JavaScript代码)
Nov 20 Javascript
dojo学习第一天 Tab选项卡 实现
Aug 28 Javascript
jquery插件如何使用 jQuery操作Cookie插件使用介绍
Dec 15 Javascript
jquery.validate的使用说明介绍
Nov 12 Javascript
判断访客终端类型集锦
Jun 05 Javascript
Hallo.js基于jQuery UI所见即所得的Web编辑器
Jan 26 Javascript
总结十个Angular.js由浅入深的面试问题
Aug 26 Javascript
Bootstrap轮播图的使用和理解4
Dec 14 Javascript
微信小程序 Animation实现图片旋转动画示例
Aug 22 Javascript
微信小程序canvas.drawImage完全显示图片问题的解决
Nov 30 Javascript
Node.js 如何利用异步提升任务处理速度
Jan 07 Javascript
javascript 构建模块化开发过程解析
Sep 11 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 获取客户端真实IP地址多种方法小结
2010/05/15 PHP
PHP无刷新上传文件实现代码
2011/09/19 PHP
PHP 在5.1.* 和5.2.*之间 PDO数据库操作中的不同之处小结
2012/03/07 PHP
PHP 观察者模式的实现代码
2013/05/10 PHP
php生成rss类用法实例
2015/04/14 PHP
php for 循环使用的简单实例
2016/06/02 PHP
ThinkPHP5.1+Ajax实现的无刷新分页功能示例
2020/02/10 PHP
地址栏上的一段语句,改变页面的风格。(教程)
2008/04/02 Javascript
Javascript 日期处理之时区问题
2009/10/08 Javascript
常见JS效果之图片减速度滚动实现代码
2011/12/08 Javascript
jQuery实现字符串按指定长度加入特定内容的方法
2015/03/11 Javascript
JavaScript数组随机排列实现随机洗牌功能
2015/03/19 Javascript
js实现两点之间画线的方法
2015/05/12 Javascript
jquery使整个div区域可以点击的方法
2015/06/24 Javascript
详解Bootstrap glyphicons字体图标
2016/01/04 Javascript
vue2.0在table中实现全选和反选的示例代码
2017/11/04 Javascript
浅谈Javascript中的对象和继承
2019/04/19 Javascript
vue项目实现设置根据路由高亮对应的菜单项操作
2020/08/06 Javascript
[01:09]DOTA2次级职业联赛 - ishow.HMM战队宣传片
2014/12/01 DOTA
Using Django with GAE Python 后台抓取多个网站的页面全文
2016/02/17 Python
python实现异常信息堆栈输出到日志文件
2019/12/26 Python
如何通过python实现全排列
2020/02/11 Python
详解pandas中iloc, loc和ix的区别和联系
2020/03/09 Python
深入了解python列表(LIST)
2020/06/08 Python
HTML5 FileReader对象的具体使用方法
2020/05/22 HTML / CSS
伦敦最著名的老字号百货公司:Selfridges(塞尔福里奇百货)
2016/07/25 全球购物
国际化的太阳镜及太阳镜配件零售商:Sunglass Hut
2016/07/26 全球购物
Chain Reaction Cycles俄罗斯:世界上最大的在线自行车商店
2019/08/27 全球购物
学校经典推荐信
2013/10/30 职场文书
领导干部“四风”问题批评与自我批评材料
2014/09/24 职场文书
同事打架检讨书
2015/05/06 职场文书
企业宣传语大全
2015/07/13 职场文书
利用python做表格数据处理
2021/04/13 Python
SpringBoot读取Resource下文件的4种方法
2021/07/02 Java/Android
解决pycharm下载库时出现Failed to install package的问题
2021/09/04 Python
使用Redis实现分布式锁的方法
2022/06/16 Redis