[react-native]mobx (react中全局数据管理库, 可以简单的实现数据的跨组件共享,类似于vue中的vuex)

简介: [react-native]mobx (react中全局数据管理库, 可以简单的实现数据的跨组件共享,类似于vue中的vuex)

使用步骤


1. 安装依赖



  • mobx核心库
  • mobx-react 方便在react中使用mobx技术的库
  • @babel/plugin-proposal-decorators 让rn项目支持es7的装饰器语法的库


# yarn add mobx mobx-react @babel/plugin-proposal-decorators
复制代码


2、在babel.config.js添加以下配置



plugins: [
  ['@babel/plugin-proposal-decorators', {'legacy': true}]]
]
#结果
module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    ['@babel/plugin-proposal-decorators', {'legacy': true}]
  ]
};
复制代码


3、新建文件 mobx\index.js 用来存放全局数据



import { observable, action } from 'mobx'
class RootStore {
    // observable 表示数据可监控, 表示是全局数据
    @observable name = 'hello'
    // action 行为 表示changeName是个可以修改全局共享数据的方法
    @action changeName(name) {
        this.name = name
    }
}
export default new RootStore()
复制代码


4、在根组件中挂载



通过Provider来挂载和传递

相关实践学习
如何快速连接云数据库RDS MySQL
本场景介绍如何通过阿里云数据管理服务DMS快速连接云数据库RDS MySQL,然后进行数据表的CRUD操作。
相关文章
|
28天前
|
数据采集 存储 安全
数据治理≠数据管理!90%的企业都搞错了重点!
在数字化转型中,数据不一致、质量差、安全隐患等问题困扰企业。许多组织跳过基础的数据管理,直接进行数据治理,导致方案难以落地。数据管理涵盖数据生命周期中的采集、存储、处理等关键环节,决定了数据是否可用、可靠。本文详解数据管理的四大核心模块——数据质量、元数据、主数据与数据安全,并提供构建数据管理体系的四个阶段:评估现状、确定优先级、建立基础能力与持续改进,助力企业夯实数据基础,推动治理落地。
|
5月前
|
存储 数据管理 数据格式
数据治理 vs. 数据管理:别再傻傻分不清!
数据治理 vs. 数据管理:别再傻傻分不清!
275 10
|
1月前
|
数据采集 存储 SQL
数据管理四部曲:元数据管理、数据整合、数据治理、数据质量管控
老张带你搞定企业数据管理难题!数据找不到、看不懂、用不好?关键在于打好元数据管理、数据整合、数据治理和数据质量管控四大基础。四部曲环环相扣,助你打通数据孤岛,提升数据价值,实现精准决策与业务增长。
数据管理四部曲:元数据管理、数据整合、数据治理、数据质量管控
|
3月前
|
数据采集 人工智能 监控
企业数据来源杂、质量差,如何通过主数据管理解决?如何确保数据可信、一致和可用?
本文三桥君系统介绍了主数据管理(MDM)在企业数字化转型中的关键作用。产品专家三桥君从数据清洗、治理、处理到流转四个维度,详细阐述了如何通过标准化流程将数据转化为企业核心资产。重点包括:数据清洗的方法与工具应用;数据治理的组织保障与制度设计;数据处理的三大核心动作;以及数据流转的三种模式与安全控制。专家三桥君强调主数据管理能够推动企业从"经验决策"转向"数据驱动",并提出构建统一数据服务网关、"数据血缘图谱"等实战建议,为企业数字化转型提供系统化解决方案。
138 0
|
4月前
|
JavaScript 前端开发 UED
Vue 表情包输入组件的实现代码:支持自定义表情库、快捷键发送和输入框联动的聊天表情解决方案
本文详细介绍了在 Vue 项目中实现一个功能完善、交互友好的表情包输入组件的方法,并提供了具体的应用实例。组件设计包含表情分类展示、响应式布局、与输入框的交互及样式定制等功能。通过核心技术实现,如将表情插入输入框光标位置和点击外部关闭选择器,确保用户体验流畅。同时探讨了性能优化策略,如懒加载和虚拟滚动,以及扩展性方案,如自定义主题和国际化支持。最终,展示了如何在聊天界面中集成该组件,为用户提供丰富的表情输入体验。
348 8
|
11月前
|
人工智能 关系型数据库 分布式数据库
拥抱Data+AI|“全球第一”雅迪如何实现智能营销?DMS+PolarDB注入数据新活力
针对雅迪“云销通App”的需求与痛点,本文将介绍阿里云瑶池数据库DMS+PolarDB for AI提供的一站式Data+AI解决方案,助力销售人员高效用数,全面提升销售管理效率。
|
7月前
|
SQL JavaScript 前端开发
Vue实现动态数据透视表(交叉表)
Vue实现动态数据透视表(交叉表)
366 13
|
11月前
|
缓存 JavaScript UED
Vue3中v-model在处理自定义组件双向数据绑定时有哪些注意事项?
在使用`v-model`处理自定义组件双向数据绑定时,要仔细考虑各种因素,确保数据的准确传递和更新,同时提供良好的用户体验和代码可维护性。通过合理的设计和注意事项的遵循,能够更好地发挥`v-model`的优势,实现高效的双向数据绑定效果。
358 64
|
7月前
|
JavaScript 前端开发 API
管理数据必备;侦听器watch用法详解,vue2与vue3中watch的变化与差异
一篇文章同时搞定Vue2和Vue3的侦听器,是不是很棒?不要忘了Vue3中多了一个可选项watchEffect噢。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~

热门文章

最新文章