从今天开始我们来搞搞状态管理可否,这几天没怎么写博客,因为被病魔战胜了,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. 大比速:remoting、WCF(http)、WCF(tcp)、WCF(RESTful)、asp.net core(RESTful)

    近来在考虑一个服务选型,dotnet提供了众多的远程服务形式.在只考虑dotnet到dotnet的情形下,我们可以选择remoting.WCF(http).WCF(tcp).WCF(RESTful). ...

  2. 三种定义bean的方式

    方法一:基于XML的bean定义(需要提供setter方法) 1.首先编写student.java和teacher.java两个类 Student.java: public class Student ...

  3. JSON 字符串解析技巧总结

    在解析JSONObject的字符数据的时候,可以考虑去使用optString 解析网络JSON数据时,获取数据的两个方法optString和getString: 使用optString获取数据时,即使 ...

  4. Yii2 Template 组件框架集封装

    项目简介: Yii2_Template是一个“提供大多数PHP常用的组件去集合成的一套基于Yii2的项目框架”. 该项目是一款秉着提高 开发效率.降低开发成本,遵循高拓展,高可用的原则的进行开发的框架 ...

  5. 第二十三节:Java语言基础-详细讲解函数与数组

    函数 函数在Java中称为方法,在其他语言中可能称为函数,函数,方法就是定义在类中具有特定功能的程序.函数,在Java中可称为方法. 函数的格式: 修饰符 返回值类型 函数名(参数类型 参数1, 参数 ...

  6. Rip配置

    Rip配置 首先建立如图拓扑图 分别配置两台电脑的ip地址和子网掩码和网关.如图所示. 在router0上配置两个端口的IP以及子网掩码 在路由器router0上配置rip2协议.里面的no auto ...

  7. Java学习之Servlet篇

    <JAVA遇见HTML——Servlet篇> Servlet 生命周期:Servlet 加载--->实例化--->服务--->销毁. init():在Servlet的生命 ...

  8. [P2402] 奶牛隐藏

    二分答案+最大流. 对答案建图,若长度≤答案,连边即可.(先要预处理点对间的最短路) 当然得拆点,(否则,就此题而言,就会出现流量x-y不走x-y的最短路边的情况,而是走了一条路径 ,答案约束的仅仅是 ...

  9. hashmap可以用null为键值

    import java.util.HashMap; import java.util.Map; import java.util.TreeMap;   public class TestMain { ...

  10. UML类图中的六种关系(物理设计阶段)

    UML类图中经常会用到各种箭头和线条来表示不同类或者接口之间的关系,因此非常好的理解各个图标的含义是很有必要的. 在物理设计阶段可以通过EA工具将类图搭建好,然后直接生成物理类,这样也可以减少物理设计 ...