本机中反应Mobx的使用方法详解

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

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

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

<强>引用官网上的一句话:

　　

MobX是一个经过战火洗礼的库,它通过透明的函数响应式编程(透明地应用功能反应性编程- TFRP)使得状态管理变得简单和可扩展.MobX背后的哲学很简单:

　　 　　

MobX是一款精准的状态管理工具库,对我来说非常容易学习和接受。我在反应和反应本机应用中使用过通量,Alt,回来的和回流,但我会毫不犹豫地说,MobX的简单性立即成为了我最喜欢的状态管理工具。我期望能将它运用在未来的项目中,并且对MobX的发展拭目以待。

　　

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

　　

上官网的图

　　

　　

环境我就不配了,官网给了详细的教程,我的环境是RN + TS,这里需要特别注意一下,由于Mobx要用的装饰器,如果单纯的用create-react-app安装好环境后,一定要特别特别注意:

　　

此时使用@observable是不行的,因为不支持装饰器语法,

　　

此问题有两种解决方案:1。在当前环境中设置支持装饰器,

　　

下面是官网的详细配置链接,https://cn.mobx.js.org/best/decorators.html

　　

2。使用MobX的内置的decorate 工具在不支持装饰器语法的情况加使用

　　

接下来下面给你吃,不是,下面我用一个小例子来演示一下,去,去,去(注意,我这里面默认装饰器是可用的,因为我环境配好了已经)

　　

1。纱添加mobx 

　　

2。首先我们状态管理肯定会有一个仓库吧,那我们来建一个仓库,(注意:我创建了两个小的分支,因为状态管理总不可能怼到一个文件里面吧)

　　

首先上一手仓库的结构

　　

　　从“mobx”进口{可见,行动} 　　 　　 　　{类列表 　　@observable isShowMap:布尔=false 　　 　　@action 　　switchTab(信息:布尔){ 　　这一点。isShowMap=信息 　　} 　　} 　　 　　出口默认新列表() 　　 　　

list.tsx的代码

　　

注意:1 .此处多加入了runInAction,不加此属性当然也可以,但是就不会记录时间旅行了

　　 　　 　　进口{观察、行动、runInAction}“mobx” 　　 　　{类列表 　　@observable listData: Array=[] 　　 　　@action 　　getListData () { 　　fetch (“https://ik9hkddr.qcloud.la/mock/cookbook-list.json”) 　　不要犹豫(反应=比;reponse.json ()) 　　不要犹豫(结果=比;{ 　　runInAction(()=比;{ 　　这一点。listData=https://www.yisu.com/zixun/result.data 　　}) 　　}) 　　} 　　} 　　 　　出口默认新列表() 　　 　　

index.js的代码

　　

注意:在此处将两个树枝里面的数据都引入,合并到一起

　　 　　 　　从“导入列表。/列表' 　　进口从“/home。” 　　常量存储={列表,回家} 　　出口默认存储 　　 　　

3。将仓库绑定到根组件上

　　

,,,,在此引入提供者将仓库和根组件绑定

　　 　　 　　从“反应”进口的反应 　　从“mobx-react”进口{提供商} 　　进口国内。/页面/Home/回家的 　　从“进口活动表。/页面/活动表/活动表” 　　从“进口商店。/存储的 　　 　　出口的默认类componentName延伸反应。组件{ 　　呈现(){ 　　回报( 　　& lt;提供程序存储={商店}祝辞 　　& lt; RootStack> & lt;/RootStack> 　　& lt;/Provider> 　　） 　　} 　　}} 　　 　　

4。最后一步,在组件中引用仓库里的数据,并可以修改仓库里的数据

　　

1。引入观察者和注入,将组件和仓库连接起来,类似于在反应中使用react-redux中照样的联系方法

　　 　　

本机中反应Mobx的使用方法详解