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

本文涉及的产品
数据管理 DMS,安全协同 3个实例 3个月
推荐场景:
学生管理系统数据库
简介: [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来挂载和传递

相关文章
|
17天前
|
JavaScript 前端开发 API
详解React与Vue的性能对比
详解React与Vue的性能对比
57 0
|
23天前
|
JavaScript
vue和ainapp动态获取数据改变背景颜色
vue和ainapp动态获取数据改变背景颜色
13 2
|
1月前
|
Web App开发 缓存 数据库
DMS产品常见问题之DMS数据规定失败如何解决
DMS(数据管理服务,Data Management Service)是阿里云提供的一种数据库管理和维护工具,它支持数据的查询、编辑、分析及安全管控;本汇总集中了DMS产品在实际使用中用户常遇到的问题及其相应的解答,目的是为使用者提供快速参考,帮助他们有效地解决在数据管理过程中所面临的挑战。
|
17天前
Vue3 子传父 暴露数据 defineExpose
Vue3 子传父 暴露数据 defineExpose
Vue3 子传父 暴露数据 defineExpose
|
5天前
|
存储 Oracle 数据管理
Oracle 12c的自动数据优化(ADO)与热图:数据管理的“瘦身”与“透视”艺术
【4月更文挑战第19天】Oracle 12c的ADO和热图技术革新数据管理。ADO智能清理无用数据,优化存储,提升查询速度,实现数据"瘦身";热图则以直观的视觉表示展示数据分布和状态,助力识别性能瓶颈,犹如数据的"透视"工具。这两项技术结合,强化数据管理,为企业业务发展保驾护航。
|
12天前
|
人工智能 安全 数据处理
首次全国数据工作会议召开,数据管理体制建设迈上新台阶
首次全国数据工作会议召开,数据管理体制建设迈上新台阶
24 1
|
13天前
|
存储 JavaScript 搜索推荐
vue如何实现登录数据的持久化
vue如何实现登录数据的持久化
|
17天前
Vue3 响应式数据 reactive使用
Vue3 响应式数据 reactive使用
|
17天前
|
JavaScript
Vue 定义只读数据 readonly
Vue 定义只读数据 readonly
|
17天前
|
JavaScript
Vue 响应式数据的判断
Vue 响应式数据的判断