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 相关文章推荐
Jquery知识点二 jquery下对数组的操作
Jan 15 Javascript
js 编程笔记 无名函数
Jun 28 Javascript
JavaScript中的getMilliseconds()方法使用详解
Jun 10 Javascript
JS判断页面是否出现滚动条的方法
Jul 17 Javascript
js控制多图左右滚动切换效果代码分享
Aug 26 Javascript
jQuery在线选座位插件seat-charts特效代码分享
Aug 27 Javascript
谈一谈bootstrap响应式布局
May 23 Javascript
es7学习教程之fetch解决异步嵌套问题的方法示例
Jul 21 Javascript
详解webpack2异步加载套路
Sep 14 Javascript
vue单页缓存存在的问题及解决方案(小结)
Sep 25 Javascript
基于form-data请求格式详解
Oct 29 Javascript
addEventListener()和removeEventListener()追加事件和删除追加事件
Dec 04 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中常用的字符串格式化函数总结
2014/11/19 PHP
php+xml编程之SimpleXML的应用实例
2015/01/24 PHP
给WordPress中的留言加上楼层号的PHP代码实例
2015/12/14 PHP
PHP实现的自定义数组排序函数与排序类示例
2016/11/18 PHP
基于laravel缓冲cache的用法详解
2019/10/23 PHP
php+ajax实现文件切割上传功能示例
2020/03/03 PHP
javascript String 对象
2008/04/25 Javascript
Jquery 获得服务器控件值的方法小结
2010/05/11 Javascript
全面详细的jQuery常见开发技巧手册
2016/02/21 Javascript
angularjs封装bootstrap时间插件datetimepicker
2016/06/20 Javascript
jQuery无缝轮播图代码
2016/12/22 Javascript
深入理解Node.js中通用基础设计模式
2017/09/19 Javascript
浅谈MUI框架中加载外部网页或服务器数据的方法
2018/01/31 Javascript
AngularJS select加载数据选中默认值的方法
2018/02/28 Javascript
vue2.x集成百度UEditor富文本编辑器的方法
2018/09/21 Javascript
Js通过AES加密后PHP用Openssl解密的方法
2019/07/12 Javascript
Vue elementui字体图标显示问题解决方案
2020/08/18 Javascript
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
2020/11/18 Vue.js
python基础入门学习笔记(Python环境搭建)
2016/01/13 Python
Python3实现发送QQ邮件功能(附件)
2020/12/23 Python
Python3.6基于正则实现的计算器示例【无优化简单注释版】
2018/06/14 Python
opencv python 基于KNN的手写体识别的实例
2018/08/03 Python
详解python中__name__的意义以及作用
2019/08/07 Python
python实现的分层随机抽样案例
2020/02/25 Python
解决pytorch多GPU训练保存的模型,在单GPU环境下加载出错问题
2020/06/23 Python
澳大利亚连衣裙和女装在线:Esther
2017/11/11 全球购物
英国建筑用品在线:Building Supplies Online(BSO)
2018/04/30 全球购物
学校岗位设置方案
2014/01/16 职场文书
对教师的评语
2014/04/28 职场文书
大学生优秀班干部事迹材料
2014/05/26 职场文书
班训口号大全
2014/06/18 职场文书
篮球社团活动总结
2014/06/27 职场文书
关于教师节的广播稿
2014/09/10 职场文书
同学聚会通知书
2015/04/20 职场文书
2016党风廉政建设心得体会范文
2016/01/25 职场文书
Python 高级库15 个让新手爱不释手(推荐)
2021/05/15 Python