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第一课
Feb 27 Javascript
javascript 学习笔记(onchange等)
Nov 14 Javascript
js弹出层(jQuery插件形式附带reLoad功能)
Apr 12 Javascript
浅谈Javascript如何实现匀速运动
Dec 19 Javascript
javascript实现鼠标移到Image上方时显示文字效果的方法
Aug 07 Javascript
第六篇Bootstrap表格样式介绍
Jun 21 Javascript
封装的dialog插件 基于bootstrap模态对话框的简单扩展
Aug 10 Javascript
jquery使用iscorll实现上拉、下拉加载刷新
Oct 26 jQuery
用VueJS写一个Chrome浏览器插件的实现方法
Feb 27 Javascript
layerui代码控制tab选项卡,添加,关闭的实例
Sep 04 Javascript
在vue中使用vuex,修改state的值示例
Nov 08 Javascript
什么是SOLID
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
咖啡的植物学知识
2021/03/03 咖啡文化
一个严格的PHP Session会话超时时间设置方法
2014/06/10 PHP
php清空(删除)指定目录下的文件,不删除目录文件夹的实现代码
2014/09/04 PHP
php源码分析之DZX1.5随机数函数random用法
2015/06/17 PHP
cakephp2.X多表联合查询join及使用分页查询的方法
2017/02/23 PHP
mysqli扩展无法在PHP7下升级问题的解决
2019/09/10 PHP
前端开发过程中浏览器版本的两种判定方法
2013/10/30 Javascript
利用jQuery设计一个简单的web音乐播放器的实例分享
2016/03/08 Javascript
移动端滑动插件Swipe教程
2016/10/16 Javascript
JavaScript实现邮箱地址自动匹配功能代码
2016/11/28 Javascript
基于jQuery实现的打字机效果
2017/01/16 Javascript
Canvas实现动态的雪花效果
2017/02/13 Javascript
jquery中$.fn和图片滚动效果实现的必备知识总结
2017/04/21 jQuery
HTML5实现微信拍摄上传照片功能
2017/04/21 Javascript
JavaScript实现二叉树定义、遍历及查找的方法详解
2017/12/20 Javascript
详解VUE2.X过滤器的使用方法
2018/01/11 Javascript
浅谈vue-cli 3.0.x 初体验
2018/04/11 Javascript
AngularJS上传文件的示例代码
2018/11/10 Javascript
vue模仿网易云音乐的单页面应用
2019/04/24 Javascript
Vue 引入AMap高德地图的实现代码
2019/04/29 Javascript
python+django+rest框架配置创建方法
2019/08/31 Python
Python实现图片批量加入水印代码实例
2019/11/30 Python
详解pandas绘制矩阵散点图(scatter_matrix)的方法
2020/04/23 Python
Python读取JSON数据操作实例解析
2020/05/18 Python
Python学习之路之pycharm的第一个项目搭建过程
2020/06/18 Python
Python 使用Opencv实现目标检测与识别的示例代码
2020/09/08 Python
python分布式爬虫中消息队列知识点详解
2020/11/26 Python
中国茶叶、茶具一站式网上购物商城:醉品茶城
2018/07/03 全球购物
英国领先品牌手动工具和电动工具供应商:Tooled Up
2018/11/24 全球购物
大学生个人推荐信范文
2013/11/25 职场文书
学用政策心得体会
2014/09/10 职场文书
演讲稿:​快乐,从不抱怨开始!
2019/04/02 职场文书
《初涉尘世》读后感3篇
2020/01/10 职场文书
python源码剖析之PyObject详解
2021/05/18 Python
MySQL数据库简介与基本操作
2022/05/30 MySQL
win10输入法不见了只能打出字母怎么解决?
2022/08/05 数码科技