从今天开始我们来搞搞状态管理可否,这几天没怎么写博客,因为被病魔战胜了,tmd,突然的降温让我不知所措,大家最近注意安全,毕竟年底了,查的严,呸,大家注意保暖

  特别声明:写该文只是写一下用MobX的思路,有很多地方我会直接放官网链接,因为官网已经写的够详细了

  首先来个比较简单的,MobX。

  引用官网上的一句话:

    MobX 是一个经过战火洗礼的库,它通过透明的函数响应式编程(transparently applying functional reactive programming - TFRP)使得状态管理变得简单和可扩展。MobX背后的哲学很简单:

  任何源自应用状态的东西都应该自动地获得。其中包括UI、数据序列化、服务器通讯,等等。

  上官网的图

  

    环境我就不配了,官网给了详细的教程,我的环境是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.首先我们状态管理肯定会有一个仓库吧,那我们来建一个仓库,(注意:我创建了两个小的分支,因为状态管理总不可能怼到一个文件里面吧)

    首先上一手仓库的结构

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)
}
}

到这里,今天的随笔已经结束了,可能写的不是那木有条理,若有错误还往各位同学指出,我嗓子已经说不出话来了,所以在这提醒各位同学

学技术的同时一定要记得锻炼身体,我的天,少吃饭多吃药,多打代码多保健,活着最重要!

告辞告辞

    

React Native中Mobx的使用的更多相关文章

  1. React Native 中 CSS 的使用

    首先声明,此文原作者为黎 跃春 React Native中CSS 内联样式 对象样式 使用Stylesheet.Create 样式拼接 导出样式对象 下面的代码是index.ios.js中的代码: / ...

  2. react native中的欢迎页(解决首加载白屏)

    参照网页: http://blog.csdn.net/fengyuzhengfan/article/details/52712829 首先是在原生中写一些方法,然后通过react native中js去 ...

  3. React Native中的网络请求fetch和简单封装

    React Native中的网络请求fetch使用方法最为简单,但却可以实现大多数的网络请求,需要了解更多的可以访问: https://segmentfault.com/a/1190000003810 ...

  4. [转] 「指尖上的魔法」 - 谈谈 React Native 中的手势

    http://gold.xitu.io/entry/55fa202960b28497519db23f React-Native是一款由Facebook开发并开源的框架,主要卖点是使用JavaScrip ...

  5. [转] 在React Native中使用ART

    http://bbs.reactnative.cn/topic/306/%E5%9C%A8react-native%E4%B8%AD%E4%BD%BF%E7%94%A8art 前半个月捣腾了一下Rea ...

  6. react native中使用echarts

    开发平台:mac pro node版本:v8.11.2 npm版本:6.4.1 react-native版本:0.57.8 native-echarts版本:^0.5.0 目标平台:android端收 ...

  7. react native中一次错误排查 Error:Error: Duplicate resources

    最近一直在使用react native中,遇到了很多的坑,同时也学习到了一些移动端的开发经验. 今天在做一个打包的测试时,遇到了一个问题,打包过程中报错“Error:Error: Duplicate ...

  8. 在React Native中,使用fetch网络请求 实现get 和 post

    //在React Native中,使用fetch实现网络请求 /* fetch 是一个封装程度更高的网络API, 使用了Promise * Promise 是异步编程的一种解决方案 * Promise ...

  9. 《React Native 精解与实战》书籍连载「React Native 中的生命周期」

    此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...

随机推荐

  1. ASP.NET MVC下使用AngularJs语言(九):日期时间处理与显示

    当在angularjs去显示一个时间时,如原原本本去显示这个值,它将显示一个怪怪的字符串,其实它就是被系列化json之后的字符串.如:一个空值显示为日期时间: 如果非空值显示为日期时间的情形: 为了能 ...

  2. ESB结合门户Portlet实现数据分析

    1 背景概述 笔者在公司做集成项目时,通常会涉及ESB与Portal结合实现图表数据分析功能.通过ESB获取数据库信息,然后在门户上采用Portlet接收ESB中的数据URL最后展现到门户上.本文为项 ...

  3. iOS 不能加载电子签名

    问题: 1:使用WKWebView在iOS12.0以上的系统中,可以显示PDF中的电子图章,签名.在iOS12.0以下的系统中不能显示电子签名,图章. 2:  解决方案,使用PDF.js加载. pdf ...

  4. web API简介(二):客户端储存之document.cookie API

    概述 前篇:web API简介(一):API,Ajax和Fetch 客户端储存从某一方面来说和动态网站差不多.动态网站是用服务端来储存数据,而客户端储存是用客户端来储存数据.document.cook ...

  5. [CocoaPods]常见问题

    “现在Swift有一个内置的包管理器,CocoaPods会停止开发吗?” Swift Package Manager(SPM)处于“早期设计和开发”阶段[1].它目前不支持iOS,观看操作系统或Obj ...

  6. 【Spark工作原理】Spark任务调度理解

    Spark内部有若干术语(Executor.Job.Stage.Task.Driver.DAG等),需要理解并搞清其内部关系,因为这是性能调优的基石.   节点类型有: 1. Master 节点: 常 ...

  7. C# 对密码等数据进行对称性加密解密

    类: /// <summary> /// DESEncrypt加密解密算法. /// </summary> public class DESEncrypt { private ...

  8. html2canvas的踩坑之路

    html2canvas的踩坑之路 前言 早有耳闻这个html2canvas比较坑,但无奈于产品需求的压迫,必须实现html转图片的功能,自此走上了填坑之路,好在最后的效果还算令人满意,这才没有误了产品 ...

  9. 如何从GitHub仓库clone项目

    自己也已经多次接触了git了,但是因为工作用svn,自己平时也很少用git,所以每次都是用的时候可能还可以,等过一段时间再来用的时候,就又忘得差不多了,所以索性自己写个博客,自己记得自己也好懂,而且熟 ...

  10. Netty入门——客户端与服务端通信

    Netty简介Netty是一个基于JAVA NIO 类库的异步通信框架,它的架构特点是:异步非阻塞.基于事件驱动.高性能.高可靠性和高可定制性.换句话说,Netty是一个NIO框架,使用它可以简单快速 ...