RN实现全局数据共享(非Redux,使用原生内置的方法实现)

下面这个方法是在RN使用全局数据共享的,使用原生React的方式搞得,相对于Redux配置相对简单,适合小型项目

项目内创建MyContext.js

// MyContext.js

import React from 'react';

const MyContext = React.createContext();

export default MyContext;

App.js引入

// App.js

import React, { useState } from 'react';
import MyContext from './MyContext';
import ChildComponent from './ChildComponent';

function App() {
  // 多个数据的话使用对象包裹
  const [globalData, setGlobalData] = useState({
    message: 'Hello from Context!',
    count: 0
  });

  // 修改文字
  const updateMessage = (newMessage) => {
    setGlobalData({ ...globalData, message: newMessage });
  };
 // 点击将count+1
  const incrementCount = () => {
    setGlobalData({ ...globalData, count: globalData.count + 1 });
  };
// 点击将count-1
  const decrementCount = () => {
    setGlobalData({ ...globalData, count: globalData.count - 1 });
  };

  return (
    // 多个方法的话,可以往后继续写
    <MyContext.Provider value={{ data: globalData, updateMessage, incrementCount, decrementCount }}>
      <ChildComponent />
    </MyContext.Provider>
  );
}

export default App;

组件内使用

// ChildComponent.js

import React, {useContext} from 'react';
import MyContext from './MyContext';
import {Button, SafeAreaView, Text, View} from 'react-native';
function ChildComponent() {
  const {data, updateMessage, incrementCount, decrementCount} = useContext(MyContext);

  // 修改文字
  const handleClick = () => {
    updateMessage('New message from ChildComponent!');
  };

  return (
    <SafeAreaView>
      <View>
        <Text>{data.message}</Text>
        <Text>{data.count}</Text>
        <Button title="点击修改文字" onPress={handleClick}></Button>
        <Button title="点击将count+1" onPress={incrementCount}></Button>
        <Button title="点击将count-1" onPress={decrementCount}></Button>
      </View>
    </SafeAreaView>
  );
}

export default ChildComponent;

效果图

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/511074.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

浏览器工作原理与实践--WebAPI:XMLHttpRequest是怎么实现的

在上一篇文章中我们介绍了setTimeout是如何结合渲染进程的循环系统工作的&#xff0c;那本篇文章我们就继续介绍另外一种类型的WebAPI——XMLHttpRequest。 自从网页中引入了JavaScript&#xff0c;我们就可以操作DOM树中任意一个节点&#xff0c;例如隐藏/显示节点、改变颜色、…

github 仓库 修改开源协议

记录一下如何修改协议。 然后commit到你想要的主干或者分支就可以了。

视频汇聚/安防监控/EasyCVR平台播放器EasyPlayer更新:新增【性能面板】

视频汇聚/安防监控/视频存储平台EasyCVR基于云边端架构&#xff0c;可以在复杂的网络环境中快速、灵活部署&#xff0c;平台视频能力丰富&#xff0c;可以提供实时远程视频监控、视频录像、录像回放与存储、告警、语音对讲、云台控制、平台级联、磁盘阵列存储、视频集中存储、云…

什么是Redis共享Session?

如图所示&#xff0c;一个分布式部署的Web服务器将用户的Session信息&#xff08;例如用户登录信息&#xff09;&#xff0c;保存在各自服务器内部。这样会造成一个问题&#xff0c;在分布式部署多个Web服务器时&#xff0c;我们通常会采用负载均衡算法&#xff0c;将多个用户的…

探索设计模式的魅力:AI大模型如何赋能C/S模式,开创服务新纪元

​&#x1f308; 个人主页&#xff1a;danci_ &#x1f525; 系列专栏&#xff1a;《设计模式》《MYSQL应用》 &#x1f4aa;&#x1f3fb; 制定明确可量化的目标&#xff0c;坚持默默的做事。 &#x1f680; 转载自热榜文章&#xff1a;探索设计模式的魅力&#xff1a;AI大模型…

全能视频下载工具:支持 100+ 网站 | 开源日报 No.212

KurtBestor/Hitomi-Downloader Stars: 18.6k License: NOASSERTION Hitomi-Downloader 是一个桌面实用程序&#xff0c;可以从各种网站下载图片/视频/音乐/文本等。 该项目的主要功能、关键特性和核心优势包括&#xff1a; 简单清晰的用户界面下载加速单个任务支持 24 个线程…

数据库之迁移常规操作(Postgresql篇)

一、docker安装postgresql 1. 拉取postgres docker pull postgres2. 创建容器 注&#xff1a;默认登录账户postgres, 密码123456, 对外暴露端口5432, 卷映射&#xff1a;可在物理机修改数据库配置文件 引用文章查看&#x1f440; docker run --name postgres -e POSTGRES_P…

Linux提权!!!

上一篇文章讲了Windows的提权&#xff0c;那么这篇文章就来讲一下Linux的提权 1.SUID提权 suid权限 作用&#xff1a;让普通用户临时拥有该文件的属主的执行权限&#xff0c;suid权限只能应用在二进制可执行文件&#xff08;命令&#xff09;上&#xff0c;而且suid权限只能设置…

腾讯C++面试题分享

面试专栏&#xff1a;http://t.csdnimg.cn/0i089 目录 1.引言 2.分析 2.1.在C语言中定义一个全局变量&#xff0c;但不初始化&#xff0c;它默认的值是多少&#xff1f; 2.2.-2的源码&#xff0c;反码、补码分别是什么&#xff1f;-3呢&#xff1f;它的公式是什么&#xff…

Java | Leetcode Java题解之第4题寻找两个正序数组的中位数

题目&#xff1a; 题解&#xff1a; class Solution {public double findMedianSortedArrays(int[] A, int[] B) {int m A.length;int n B.length;if (m > n) { return findMedianSortedArrays(B,A); // 保证 m < n}int iMin 0, iMax m;while (iMin < iMax) {int…

二维相位解包理论算法和软件【全文翻译-二维相位解缠的离散形式 (2.5)】

我们已经指出,二维相位解包相当于在覆盖相关领域的路径上对相位梯度进行积分。在实践中,我们当然必须处理采样数据。然而,为了做到这一点,我们必须定义离散域中的二维相位解包问题,并明确本书中将会用到的相关术语。 从最一般、限制最少的意义上讲,二维相位解包是一个不…

实验四 微信小程序智能手机互联网程序设计(微信程序方向)实验报告

请编写一个用户登录界面&#xff0c;提示输入用户名和密码进行登录&#xff1b; 代码 index.wxml <view class"user"> <form bindreset""> <view>用户名&#xff1a;</view><input type"text"name""/>…

mysql锁表问题

问题描述 偶尔应用日志会打印锁表超时回滚 org.springframework.dao.CannotAcquireLockException: ### Error updating database. Cause: com.mysql.cj.jdbc.exceptions.MySQLTransactionRollbackException: Lock wait timeout exceeded; try restarting transactionmysql锁…

C刊级 | Matlab实现GWO-BiTCN-BiGRU-Attention灰狼算法优化双向时间卷积双向门控循环单元融合注意力机制多变量回归预测

C刊级 | Matlab实现GWO-BiTCN-BiGRU-Attention灰狼算法优化双向时间卷积双向门控循环单元融合注意力机制多变量回归预测 目录 C刊级 | Matlab实现GWO-BiTCN-BiGRU-Attention灰狼算法优化双向时间卷积双向门控循环单元融合注意力机制多变量回归预测效果一览基本介绍程序设计参考…

ArcGIS Pro打不开Excel?Microsoft驱动程序安装不上?

刚用ArcGIS pro的朋友们可能经常在打开xls或者xlsx文件的时候都会提示&#xff0c;未安装所需的Microsoft驱动程序。 怎么办呢&#xff1f;当然&#xff0c;按照提示装一下驱动就会好吗&#xff1f;有什么状况会出现&#xff1f;有什么临时替代方案呢&#xff1f; 全文目录&a…

C++的并发世界(二)——初识多线程

0.引言 C的并发世界&#xff08;零&#xff09;和C的并发世界&#xff08;一&#xff09;的东西真的对于我这种初学者难以理解&#xff0c;我确定从第一个多线程案例进行学习归纳总结。 1.多线程的目的 ①将耗时的任务进行分解&#xff0c;进行实时响应;   ②充分利用多核CP…

ICMP,ARP协议,免费ARP

ICMP:ping检测链路通断&#xff0c;到目的地的连通性。 internet网控制消息协议&#xff0c;工作在网络层。 ttl超时&#xff0c;也是icmp报文。

LeetCode刷题记(一):1~30题

1. 两数之和 给定一个整数数组 nums 和一个整数目标值 target&#xff0c;请你在该数组中找出 和为目标值 target 的那 两个 整数&#xff0c;并返回它们的数组下标。 你可以假设每种输入只会对应一个答案。但是&#xff0c;数组中同一个元素在答案里不能重复出现。 你可以…

直流电源电路(下)

直流电源电路&#xff08;下&#xff09; 综述&#xff1a;本篇文章讲述了直流电源电路的BOOST电路以及DC-DC电路的组成原理。 四、BOOST电路 原理&#xff1a;当mos导通时&#xff0c;电源上的电流给电感充电&#xff0c;通过mos管构成回路&#xff0c;电容放电给负载供电&…

从零实现一个Http服务器

HttpServer HTTPServer项目是一个基于C编写的简单的HTTP服务器实现&#xff0c;用于处理客户端的HTTP请求并提供相应的服务。该项目使用了Socket编程来实现服务器与客户端之间的通信&#xff0c;通过监听指定的端口并接受客户端连接&#xff0c;然后解析HTTP请求并生成对应的H…