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 相关文章推荐
推荐17个优美新鲜的jQuery的工具提示插件
Sep 14 Javascript
Jquery 选中表格一列并对表格排序实现原理
Dec 15 Javascript
jQuery仿Excel表格编辑功能的实现代码
May 01 Javascript
5个最顶级jQuery图表类库插件【jquery插件库】
May 05 Javascript
实现点击下箭头变上箭头来回切换的两种方法【推荐】
Dec 14 Javascript
js实现微博发布小功能
Jan 12 Javascript
Canvas放置反弹效果随机图形(实例)
Aug 17 Javascript
Angular 项目实现国际化的方法
Jan 08 Javascript
详解关于vue2.0工程发布上线操作步骤
Sep 27 Javascript
对angularJs中controller控制器scope父子集作用域的实例讲解
Oct 08 Javascript
JS获取月的第几周和年的第几周实例代码
Dec 05 Javascript
js数据类型转换与流程控制操作实例分析
Dec 18 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+javascript实现二级级联菜单的制作
2008/05/06 PHP
php date与gmdate的获取日期的区别
2010/02/08 PHP
关于PHP实现异步操作的研究
2013/02/03 PHP
php不允许用户提交空表单(php空值判断)
2013/11/12 PHP
php打印一个边长为N的实心和空心菱型的方法
2015/03/02 PHP
yii2.0实现创建简单widgets示例
2016/07/18 PHP
PHP使用PDO抽象层获取查询结果的方法示例
2018/05/10 PHP
用js实现的抽象CSS圆角效果!!
2007/05/03 Javascript
跨域表单提交状态的变相判断代码
2009/11/12 Javascript
js中AppendChild与insertBefore的用法详细解析
2013/12/16 Javascript
jquery阻止后续事件只执行第一个事件
2014/07/24 Javascript
辨析JavaScript中的Undefined类型与null类型
2016/05/26 Javascript
自己封装的一个简单的倒计时功能实例
2016/11/23 Javascript
JS异步文件上传(兼容IE8+)
2017/04/02 Javascript
JS实现图片预览的两种方式
2017/06/27 Javascript
JavaScript实现AOP详解(面向切面编程,装饰者模式)
2017/12/19 Javascript
javascript 对象 与 prototype 原型用法实例分析
2019/11/11 Javascript
javascript实现弹幕墙效果
2019/11/28 Javascript
JavaScript 面向对象程序设计详解【类的创建、实例对象、构造函数、原型等】
2020/05/12 Javascript
Vue props中Object和Array设置默认值操作
2020/07/30 Javascript
[48:48]VGJ.T vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
[06:59]DOTA2-DPC中国联赛3月7日Recap集锦
2021/03/11 DOTA
Python实现设置windows桌面壁纸代码分享
2015/03/28 Python
Python实现输入二叉树的先序和中序遍历,再输出后序遍历操作示例
2018/07/27 Python
tensorflow/core/platform/cpu_feature_guard.cc:140] Your CPU supports instructions that this T
2020/06/22 Python
世界首屈一指的钓鱼用品商店:TackleDirect
2016/07/26 全球购物
KIKO MILANO英国官网:意大利知名化妆品和护肤品品牌
2017/09/25 全球购物
艺龙旅行网酒店预订:国内、港澳台酒店
2018/06/26 全球购物
英国最大的独立摄影零售商:Park Cameras
2019/11/27 全球购物
销售人员个人求职信
2013/09/26 职场文书
大学生党员自我批评思想汇报
2014/10/10 职场文书
党委书记个人检查对照材料思想汇报
2014/10/11 职场文书
新闻稿件写作技巧
2015/07/18 职场文书
2016猴年春节慰问信
2015/11/30 职场文书
mysql left join快速转inner join的过程
2021/06/30 MySQL
使用Mysql计算地址的经纬度距离和实时位置信息
2022/04/29 MySQL