React 之 组件之间共享值useContext使用(十五)

1. useContext 是 React 中的一个 Hook,它允许你在组件之间共享值,而不必显式地通过组件树逐层传递 props。当你想要在整个应用程序中传递数据时,使用 useContext 可以使代码更加简洁和易于维护
2. 相当于vue的依赖注入模式:Provide / Inject

useContext 需要与 React.createContext() 一起使用。React.createContext() 会返回一个新的 React Context 对象。这个对象有两个属性:Provider 和Consumer。但是,useContext Hook 使得我们可以直接访问 Context 的值,而不需要使用 Consumer。

使用 useContext 的代码栗子:

import React, { createContext, useContext, useState } from 'react';  父组件:ThemeProvider
// 创建一个新的 Context 对象  
const ThemeContext = createContext();  // ThemeProvider 组件,用于包裹子组件,并提供一个 theme 属性  
function ThemeProvider({ children }) {  const [theme, setTheme] = useState('light');  // 返回一个对象,该对象会被 ThemeContext.Provider 使用  // 这样,所有 ThemeProvider 的子组件(包括嵌套组件)都可以访问到 theme 和 setTheme  return (  <ThemeContext.Provider value={{ theme, setTheme }}>  {children}  </ThemeContext.Provider>  );  
}  子组件:ThemedButton
// 使用 useContext 访问 ThemeContext 的值  
function ThemedButton() {  // 使用 useContext Hook 获取 ThemeContext 的值  const { theme, setTheme } = useContext(ThemeContext);  return (  <button  onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}  style={{ background: theme }}  >  Toggle Theme  </button>  );  
}  function App() {  return (  <ThemeProvider>  <ThemedButton />  </ThemeProvider>  );  
}  export default App;

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于springboot+mybatis+vue的项目实战之(后端+前后端联调)

步骤&#xff1a; 1、项目准备&#xff1a;创建数据库&#xff08;之前已经创建则忽略&#xff09;&#xff0c;以及数据库连接 2、建立项目结构文件夹 3、编写pojo文件 4、编写mapper文件&#xff0c;并测试sql语句是否正确 5、编写service文件 6、编写controller文件 …

【数据库原理及应用】期末复习汇总高校期末真题试卷09

试卷 一、填空题(每空1分&#xff0c;共10分) 数据的完整性是指数据的________、有效性和相容性。数据模型通常由________、数据操作以及数据约束条件等三要素组成。在关系的有关术语中&#xff0c;关系表中的每一行称作________&#xff0c;每一列称作属性。信息的三种世界是…

C++:多态-虚函数

C 中的多态性是面向对象编程中的一个重要概念&#xff0c;它允许在运行时选择不同的函数实现&#xff0c;以适应不同类型的对象。 多态的种类 编译时多态性&#xff08;Compile-time Polymorphism&#xff09;&#xff1a;也称为静态多态性或早期绑定&#xff0c;指在编译时确…

【网络协议】----IPv6协议报文、地址分类

【网络协议】----IPv6协议简介 【网络协议】----IPv6协议简介IPv6特点IPv4 和 IPv6报文结构IPv6报文格式-拓展报头 IPv6地址分类IPv6地址表示IPv6单播地址可聚合全球单播地址链路本地地址唯一本地地址特殊地址补充 接口标识&#xff08;主机位&#xff09;生成方法通过EUI-64规…

CISCN 2023 初赛

Web unzip 文件上传页面 upload.php页面源码显示了出来 <?php error_reporting(0); highlight_file(__FILE__);$finfo finfo_open(FILEINFO_MIME_TYPE); if (finfo_file($finfo, $_FILES["file"]["tmp_name"]) application/zip){exec(cd /tmp &am…

IP协议,网络层

一、IP协议报文 在网络层最主要的协议是IP协议&#xff0c;网络层的主要任务是进行&#xff1a;1.地址管理 2.路由选择 地址管理&#xff1a;使用一套地址体系&#xff0c;描述互联网中每个设备所处的位置。 IP地址有两个版本&#xff0c;1.IPV4 2.IPV6 &#xff0c;IP…

【神经网络】09 - 优化器 torch.optim

09 - 优化器 torch.optim 概念 优化器是用于更新和管理模型参数以改进模型性能的一种工具。在机器学习和深度学习中&#xff0c;优化器的主要任务是通过调整模型的参数来最小化或最大化特定的目标函数。在许多情况下&#xff0c;这个目标函数是一个损失函数&#xff0c;我们的…

信奥数据“信息差”,让你惊掉下巴!

✅ 信奥红利分析 暑假信奥赛即将到来&#xff0c;在全国各地赛事也越来越受到重视&#xff0c;但是似乎关于红利这一块各地如何&#xff0c;并没有太多的老师给各位家长分析清楚。 那么今天曹老师就主要给从各位新手家长分析一下信奥红利地区&#xff0c;在开始分析之前请大家看…

使用 MediaMTX 和 FFmpeg 推拉 RTSP 流媒体

实时流传输协议 RTSP&#xff08;Real-Time Streaming Protocol&#xff09;是 TCP/IP 协议体系中的一个应用层协议&#xff0c;由哥伦比亚大学、网景和 RealNetworks 公司提交的 IETF RFC 标准。该协议定义了一对多应用程序如何有效地通过 IP 网络传送多媒体数据。RTSP 在体系…

将每个Excel文件的数据量统一减少至120000行

为了将每个Excel文件的数据量统一减少至120000行&#xff0c;可以使用Python的pandas库来加载、修改和保存每个文件。以下是一个简单的Python脚本&#xff1a; 首先&#xff0c;确保已经安装了pandas库&#xff0c;如果没有安装&#xff0c;可以通过以下命令安装&#xff1a; …

初始化创建一个webpack项目

新建一个空的工程 -> % mkdir webpack-project 为了方便追踪执行每一个命令&#xff0c;最终产生了哪些变更&#xff0c;将这个空工程初始化成git项目 -> % cd webpack-project/-> % git init Initialized empty Git repository in /Users/lixiang/frontworkspace/…

初探MFC程序混合使用QT

一、背景 随着操作系统国产化替代的趋势越发明显&#xff0c;软件支持国际化、跨平台&#xff0c;已然是必须做的一件事情。原有的软件UI层用的是MFC&#xff0c;将其换成QT&#xff0c;想必是一种较好的方案。对于大型软件&#xff0c;特别是已发布&#xff0c;但还处于不断迭…

C++进阶之路:探索访问限定符、封装与this指针的奥秘(类与对象_上篇)

✨✨ 欢迎大家来访Srlua的博文&#xff08;づ&#xffe3;3&#xffe3;&#xff09;づ╭❤&#xff5e;✨✨ &#x1f31f;&#x1f31f; 欢迎各位亲爱的读者&#xff0c;感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua小谢&#xff0c;在这里我会分享我的知识和经验。&am…

数据统计:词频统计、词表生成、排序及计数、词云图生成

文章目录 &#x1f4da;输入及输出&#x1f4da;代码实现 &#x1f4da;输入及输出 输入&#xff1a;读取一个input.txt&#xff0c;其中包含单词及其对应的TED打卡号。 输出 output.txt&#xff1a;包含按频率降序排列的每个单词及其计数&#xff08;这里直接用于后续的词云…

设计模式之单例模式详解

单例模式 描述&#xff1a;单例&#xff08;Singleton&#xff09;模式的定义&#xff1a;指一个类只有一个实例&#xff0c;且该类能自行创建这个实例的一种模式。 核心特点 单例类只有一个实例对象&#xff1b;该单例对象必须由单例类自行创建&#xff1b;单例类对外提供一…

jsSPA应用如何实现动态内容更新

JS SPA&#xff08;单页面应用&#xff09;应用的原理、优势以及例子如下&#xff1a; 原理&#xff1a; SPA应用的核心原理在于&#xff0c;它使用JavaScript动态地创建和更新DOM结构&#xff0c;而非通过传统的多页面跳转来呈现内容。当用户与应用程序交互时&#xff0c;SP…

怎么保护公司机密数据?全维度分析教会你!

随着计算机和网络技术的普及发展&#xff0c;公司和企业的办公方式和业务流发生了翻天覆地的变化。 全世界有60%的人主要从事与信息的生成、加工和存储以及相关技术的服务性工作。大量数据信息的创建、存储、传输以及共享方式已经发生了革命性的变化&#xff0c;主要表现在以下…

OpenCV 入门(一) —— OpenCV 基础

OpenCV 入门系列&#xff1a; OpenCV 入门&#xff08;一&#xff09;—— OpenCV 基础 OpenCV 入门&#xff08;二&#xff09;—— 车牌定位 OpenCV 入门&#xff08;三&#xff09;—— 车牌筛选 OpenCV 入门&#xff08;四&#xff09;—— 车牌号识别 OpenCV 入门&#xf…

【LeetCode题库】197. 上升的温度 —— 连接查询

文章目录 原题题解解题笔记 我是一名立志把细节说清楚的博主&#xff0c;欢迎【关注】&#x1f389; ~ 原创不易&#xff0c; 如果有帮助 &#xff0c;记得【点赞】【收藏】 哦~ ❥(^_-)~ 如有错误、疑惑&#xff0c;欢迎【评论】指正探讨&#xff0c;我会尽可能第一时间回复…

给定矢量初始位置,旋转角度,求解最终位置

给定矢量初始位置,旋转角度,求解最终位置 推荐阅读正文推荐阅读 矢量旋转矩阵 正文 这里如果我们给定一个矢量 O A ⃗ \vec{OA}