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 Array.sort() 跨浏览器下需要考虑的问题
Dec 07 Javascript
Javascript让DEDECMS告别手写Tag
Sep 01 Javascript
JavaScript将字符串转换成字符编码列表的方法
Mar 19 Javascript
跟我学习javascript的prototype使用注意事项
Nov 17 Javascript
Vuejs第十篇之vuejs父子组件通信
Sep 06 Javascript
JavaScript 字符串常用操作小结(非常实用)
Nov 30 Javascript
Vue分页组件实例代码
Apr 17 Javascript
Vue开发中整合axios的文件整理
Apr 29 Javascript
JavaScript闭包和回调详解
Aug 09 Javascript
了解javascript中的Dom操作
May 27 Javascript
原生javascript自定义input[type=radio]效果示例
Aug 27 Javascript
vue+springboot+element+vue-resource实现文件上传教程
Oct 21 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 抓取新浪读书频道的小说并生成txt电子书的代码
2009/12/18 PHP
thinkphp表单上传文件并将文件路径保存到数据库中
2016/07/28 PHP
php打开本地exe程序,js打开本地exe应用程序,并传递相关参数方法
2018/02/06 PHP
PHPUnit测试私有属性和方法功能示例
2018/06/12 PHP
php实现的数组转xml案例分析
2019/09/28 PHP
javascript网页关键字高亮代码
2008/07/30 Javascript
JavaScript 私有成员分析
2009/01/13 Javascript
禁止JQuery中的load方法装载IE缓存中文件的方法
2009/09/11 Javascript
jQuery setTimeout()函数使用方法
2013/04/07 Javascript
JS 修改URL参数(实现代码)
2013/07/08 Javascript
js拖拽一些常见的思路方法整理
2014/03/19 Javascript
IE下支持文本框和密码框placeholder效果的JQuery插件分享
2015/01/31 Javascript
简介JavaScript中用于处理正切的Math.tan()方法
2015/06/15 Javascript
浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用
2016/09/09 Javascript
jQuery实现select模糊查询(反射机制)
2017/01/14 Javascript
jQuery插件FusionCharts实现的2D饼状图效果【附demo源码下载】
2017/03/03 Javascript
微信小程序个人中心的列表控件实现代码
2020/04/26 Javascript
element-ui点击查看大图的方法示例
2020/12/14 Javascript
[02:41]辉夜杯现场一家三口 “我爸玩风行 我玩血魔”
2015/12/27 DOTA
linux环境下安装pyramid和新建项目的步骤
2013/11/27 Python
python使用urllib模块和pyquery实现阿里巴巴排名查询
2014/01/16 Python
Django URL传递参数的方法总结
2016/08/28 Python
Python常见异常分类与处理方法
2017/06/04 Python
使用XML库的方式,实现RPC通信的方法(推荐)
2017/06/14 Python
python连接数据库的方法
2017/10/19 Python
python3解析库BeautifulSoup4的安装配置与基本用法
2018/06/26 Python
python re正则匹配网页中图片url地址的方法
2018/12/20 Python
查看python安装路径及pip安装的包列表及路径
2019/04/03 Python
Python使用pyautocad+openpyxl处理cad文件示例
2019/07/11 Python
解决pyPdf和pyPdf2在合并pdf时出现异常的问题
2020/04/03 Python
纯CSS3代码实现switch滑动开关按钮效果
2016/08/30 HTML / CSS
编写类String 的构造函数、析构函数和赋值函数
2012/09/09 面试题
2014乡镇干部对照检查材料思想汇报
2014/09/26 职场文书
小学班主任工作经验交流材料
2015/11/02 职场文书
2019个人工作自我评价范文(3篇)
2019/09/19 职场文书
深入讲解Vue中父子组件通信与事件触发
2022/03/22 Vue.js