ReactNative中Mobx的使用方法详解-创新互联
前言
在珠海等地区,都构建了全面的区域性战略布局,加强发展的系统性、市场前瞻性、产品创新能力,以专注、极致的服务理念,为客户提供成都网站设计、成都网站建设 网站设计制作按需策划设计,公司网站建设,企业网站建设,品牌网站设计,营销型网站建设,成都外贸网站制作,珠海网站建设费用合理。从今天开始我们来搞搞状态管理可否,这几天没怎么写博客,因为被病魔战胜了,tmd,突然的降温让我不知所措,大家最近注意安全,毕竟年底了,查的严,呸,大家注意保暖
特别声明:写该文只是写一下用MobX的思路,有很多地方我会直接放官网链接,因为官网已经写的够详细了
首先来个比较简单的,MobX。
引用官网上的一句话:
MobX 是一个经过战火洗礼的库,它通过透明的函数响应式编程(transparently applying functional reactive programming - TFRP)使得状态管理变得简单和可扩展。MobX背后的哲学很简单:
MobX 是一款精准的状态管理工具库,对我来说非常容易学习和接受。我在 React 和 React Native 应用中使用过 Flux、Alt、Redux 和 Reflux,但我会毫不犹豫地说,MobX 的简单性立即成为了我最喜欢的状态管理工具。我期望能将它运用在未来的项目中,并且对 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()
新闻名称:ReactNative中Mobx的使用方法详解-创新互联
文章URL:http://scjbc.cn/article/jcgsi.html