详细解释Mobx在React Native中的使用

前言

从今天开始，让我们做国家管理。这几天我没怎么写博客，因为被病魔打败了。tmd，突然的降温让我感到不知所措。最近大家都注意安全了。毕竟年底了，调查严格。呸，大家都要注意保暖

特别声明：写这篇文章只是为了写出使用MobX的想法。有很多地方我会直接放官网链接，因为官网已经写的足够详细了

让我们从一个更简单的开始，MobX。

引用官网上的一句话：

MobX是一个饱受战争摧残的库，它通过透明地应用函数式反应式编程使状态管理变得简单和可扩展(TFRP)。MobX背后的理念很简单：

MobX是一个精确的状态管理工具库，对我来说非常容易学习和接受。我在React和React Native应用程序中使用过Flux、Alt、reduce和return，但我会毫不犹豫地说，MobX的简单性立即成为我最喜欢的状态管理工具。我期待将其应用到未来的项目中，拭目以待MobX的发展。

应用程序状态中的任何内容都应该自动获取。这些包括UI、数据序列化、服务器通信等等。

上官方网站地图

我不配拥有这样的环境。官网给出了详细的教程。我的环境是RN TS。我需要特别注意这里。由于Mobx使用的装饰器，如果您只是使用create-react-app安装环境，那么您必须特别注意它：

此时不可能使用@observable，因为不支持decorator语法。

这个问题有两个解决方案：1。在当前环境中设置支持装饰器，

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

2.当MobX不支持装饰语法时，使用它的内置装饰工具

接下来，我给你。不，我将使用一个小例子来演示，开始，开始，开始(注意，默认装饰器在这里可用，因为我的环境已经准备好了)

1 .纱线添加mobx

2.首先，我们国家管理一定要有仓库，所以我们建一个仓库吧。(注意：我创建了两个小分支，因为状态管理不能总是在一个文件中找到。)

首先，一手仓库的结构

home.tsx的代码

注意：1。从mobx引入可观察的动作

2.用装饰器装饰仓库的数据

3.导出时需要新建

从“mobx”类列表导入{observable，action}的代码{ @ observable is show map : boolean=false @ action switch tab(info : boolean){ this。is showmap=info}}导出默认的新列表()list.tsx。

注：1。这里增加了运行不作为。没有这个属性是可以的，但是时间旅行不会被记录。

从“mobx”类列表中导入{ observable，action，runinactive } { @ observable listdata : Arrayany=[]@ action getListData(){ fetch(' https://ik9 hkddr . qcloud . la/mock/Code of cook book-List . JSON ')。然后(report=report.json())。然后(result={ run in action(()={ this . listdata=result . data })} }导出默认的新列表()index.js。

注意：这里，两个分支中的数据被引入并合并在一起

从“”导入列表。/list“从导入主页”。/home' const store={list，home}导出默认存储3。将仓库绑定到根组件

注意：这里引入了提供者来绑定仓库和根组件

从“反应”导入反应从“mobx-反应”导入{ Provider }从“Home”导入。/pages/home/Home“从导入活动列表”。/pages/hotlist/HotList“从导入存储”。/store '导出默认类componentName扩展了React。组件{ render(){ return(Provider store={ store } root stack/root stack/Provider)} } } 4。最后一步是在组件中引用仓库中的数据并修改仓库中的数据

注意：1。引入观察器和注入来连接组件和仓库，这类似于在React-reduce中使用连接方法。

从' react '导入react从' mobx-react '导入{ View，Text，}从' react-native '接口道具{}接口状态{ }//引用此处最重要的步骤时使用inject和observer @ inject(' store ')@ observerexport默认类Home扩展了React。ComponentProps，State { render(){ return(View){/*引用存储区中存储的值*/} text {this。props . store . home . is show map }/text/view)} component idmount(){//调用函数修改此的值。props . store . home . switch tab(value)} }到这里，今天的短文就结束了。也许是没有条理。如果有什么错误，我会向学生指出我的嗓子说不出话来，所以在这里提醒一下他们。

在学习技术的同时，我们必须记得锻炼身体。我的天，少吃多吃药，多编码多关心。活着才是最重要的！

摘要

以上就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。有问题可以留言交流。谢谢你的支持。