当前位置: 首页 > news >正文

React Hooks之useContext使用

官方文档写道:在组件的顶层调用 useContext 来读取和订阅 context。

我理解就是一个“全局变量”的概念。它可以用来声明一个变量,然后在各个组件中使用,避免了props一级一级往下传,当然使用场景有限,比如设置一个主题背景色,按钮样式定制…这种可以使用。

代码示例:

import { createContext } from 'react'// 创建一个Context对象,它本身不包含任何信息,它只代表你可以提供或从组件中读取的信息类型
// 'red' 是默认值 当没有Provider组件时会使用这个默认值
const { Provider, Consumer } = createContext('red')function ContextDemo() {return (/* Provider组件  将当前的value传递给以下组件如果value不写,默认是undefined*/<Provider value={'pink'}><Toolbar /></Provider>)
}function Toolbar() {return <ThemedButton />
}function ThemedButton() {/* Consumer消费组件 可以订阅到value的改变此处的theme就是往上查找最近的Provider组件提供的value值*/return <Consumer>{theme => <button style={{ background: theme }}>按钮颜色:{theme}</button>}</Consumer>}export default ContextDemo

个人学习笔记📒

相关文章:

React Hooks之useContext使用

官方文档写道&#xff1a;在组件的顶层调用 useContext 来读取和订阅 context。 我理解就是一个“全局变量”的概念。它可以用来声明一个变量&#xff0c;然后在各个组件中使用&#xff0c;避免了props一级一级往下传&#xff0c;当然使用场景有限&#xff0c;比如设置一个主题…...

多模态对比语言图像预训练CLIP:打破语言与视觉的界限

项目设计集合&#xff08;人工智能方向&#xff09;&#xff1a;助力新人快速实战掌握技能、自主完成项目设计升级&#xff0c;提升自身的硬实力&#xff08;不仅限NLP、知识图谱、计算机视觉等领域&#xff09;&#xff1a;汇总有意义的项目设计集合&#xff0c;助力新人快速实…...

使用s3cmd访问S3存储 -【真实案例】

背景 项目中使用到了 S3 存储(基于华为云 OBS),并且在应用服务器上开通了到 S3 存储的防火墙。 👉 目标:在应用服务器上验证 S3 存储是否通畅可用。 👉 选型:经过分析,发现在 Linux 下可以使用 s3cmd 来访问 S3 存储。 s3cmd 简介 s3cmd 是一个开源免费的、基于 P…...

51单片机复位电容计算与分析(附带Proteus电路图)

因为iC x (dU/dt).在上电瞬间&#xff0c;U从0变化到U,所以这一瞬间就是通的&#xff0c;然后这就是一个直流回路&#xff0c;因为电容C直流中是断路的&#xff0c;所以就不通了。 然后来分析一下这个电容的电压到底是能不能达到单片机需要的复位电压。 这是一个线性电容&…...

前端性能瓶颈崩溃项目?Webpack助力解决!

&#x1f3ac; 江城开朗的豌豆&#xff1a;个人主页 &#x1f525; 个人专栏 :《 VUE 》 《 javaScript 》 &#x1f4dd; 个人网站 :《 江城开朗的豌豆&#x1fadb; 》 ⛺️ 生活的理想&#xff0c;就是为了理想的生活 ! 目录 ⭐ 专栏简介 &#x1f4d8; 文章引言 一、背…...

纷享销客BI,助力企业激活数据价值,科学企业决策

10月25日上午&#xff0c;国家数据局正式挂牌成立&#xff0c;这标志着我国数字经济发展将进入新的发展阶段&#xff0c;也将有力促进数据要素技术创新、开发利用和有效治理&#xff0c;以数据强国支撑数字中国的建设。伴随数据作为企业新的生产要素的意义不断凸显&#xff0c;…...

SpringBoot整合阿里云OSS对象存储

文章目录 1、OSS介绍及开通1.1、阿里云OSS简介1.2、开通OSS 2、创建存储空间bucket及密钥获取2.1、创建存储空间2.2、获取密钥 3、OSS快速入门案例4、在springboot项目中整合4.1、将oss配置放到yml文件中4.2、创建Oss属性类&#xff0c;接收yml文件中的属性4.3、封装文件上传功…...

【ES专题】ElasticSearch快速入门

目录 前言从一个【搜索】说起 阅读对象阅读导航笔记正文一、全文检索1.1 什么是【全文检索】1.2 【全文检索】原理1.3 什么是倒排索引 二、ElasticSearch简介2.1 ElasticSearch介绍2.2 ElasticSearch应用场景2.3 数据库横向对比 三、ElasticSearch环境搭建3.1 Windows下安装3.2…...

案例分析真题-质量属性

案例分析真题-质量属性 2009 年真题 【问题1】 【问题2】 2011 年真题 【问题1】 骚戴理解&#xff1a;首先要知道这样的题目没有可靠性&#xff0c;只有可用性&#xff0c;更没有容错性&#xff0c;这里我&#xff08;3&#xff09;写成了i&#xff0c;而不是f&#xff0c;仔…...

微信小程序面试题之理论篇

本文内容&#xff0c;来源于极客学院的分享&#xff0c;这里只做引用。 说说你对微信小程序的理解?优缺点? 背景 小程序与H5 优缺点 优点&#xff1a;缺点&#xff1a; 说说微信小程序的生命周期函数有哪些&#xff1f; 应用的生命周期页面的生命期组件的生命周期执行过程 应…...

C++前缀和算法的应用:统计上升四元组

C前缀和算法的应用&#xff1a;统计上升四元组 本文涉及的基础知识点 C算法&#xff1a;前缀和、前缀乘积、前缀异或的原理、源码及测试用例 包括课程视频 题目 给你一个长度为 n 下标从 0 开始的整数数组 nums &#xff0c;它包含 1 到 n 的所有数字&#xff0c;请你返回上…...

华泰证券:新奥能源:零售气待恢复,泛能与智家仍是亮点

来源&#xff1a;猛兽财经 作者&#xff1a;猛兽财经 猛兽财经获悉&#xff0c;由于新奥能源&#xff08;02688&#xff09;发布三季度经营数据&#xff1a; 1-3Q23&#xff1a;天然气零售量yoy-4.7%&#xff0c;燃气批发量yoy17.6%&#xff0c;综合能源销量yoy34.2%&#xff…...

FPGA与ASIC有什么差异?二者该如何选用?

前言 对于一个数字电路的新手来说&#xff0c;这可能是会经常遇到的一个问题&#xff1a;FPGA和ASIC之间的区别是什么? 接下来本文将尝试讲解 “什么是FPGA&#xff1f;” 和 “什么是ASIC&#xff1f;”&#xff0c;然后讲述一些关于FPGA和ASIC的问题&#xff0c;例如它们之间…...

Kotlin run 用法

Kotlin 中的 .run 函数可以用于不同的场景&#xff0c;下面是一些常见的用法&#xff1a; 执行代码块并返回结果&#xff1a; val result run {// 在这里编写一些代码逻辑// 返回最后一个表达式的结果"Hello, Kotlin" }println(result) // 输出&#xff1a;Hello, …...

iZotope RX 10(音频修复和增强工具)

iZotope RX 10是一款音频修复和增强软件&#xff0c;主要特点包括&#xff1a; 声音修复&#xff1a;iZotope RX 10可以去除不良噪音、杂音、吱吱声等&#xff0c;使音频变得更加清晰干净。音频增强&#xff1a;iZotope RX 10支持对音频进行音量调节、均衡器、压缩器、限制器等…...

MES 价值点之数据追随

在现代制造业中&#xff0c;数据追溯已经越来越得到重视&#xff0c;特别是那些推行精益生产的企业重要性就更加突出了&#xff0c;而制造执行系统&#xff08;MES&#xff09;作为一种关键的生产管理工具&#xff0c;是能很好的为制造企业提供数据追溯功能。今天&#xff0c;和…...

yolo8制作自己的数据集训练和预测分割

一、训练coco128-seg数据集,增加一个类别 coco128-seg数据集下载: github链接 csdn链接 1、修改两个配置文件 (1)、修改"E:\python\ultralytics-main\ultralytics\cfg\datasets\coco128-seg.yaml"路径下的coco128-seg.yaml数据集配置文件,可以拷贝出来 修改数…...

分享一下怎么做一个同城配送小程序

如何制作一个同城配送小程序&#xff1a;功能特点、使用指南及未来展望 一、引言 随着互联网的快速发展&#xff0c;人们对于生活服务的需求越来越高。同城配送作为连接消费者与商家的桥梁&#xff0c;越来越受到人们的关注。本文将详细介绍如何制作一个同城配送小程序&#…...

Qt 中model/View 架构 详解,以及案例实现相薄功能

model/View 架构 导读 ​ 我们的系统需要显示大量数据,比如从数据库中读取数据,以自己的方式显示在自己的应用程序的界面中。早期的 Qt 要实现这个功能,需要定义一个组件,在这个组件中保存一个数据对象,比如一个列表。我们对这个列表进行查找、插入等的操作,或者把修改…...

提高微星笔记本Linux下散热性能,MSI-EC 驱动新补丁发布

导读近日消息&#xff0c;今年早些时候&#xff0c;Linux 6.4 中添加了 MSI-EC 驱动程序&#xff0c;允许对 Linux 系统微星笔记本电脑进行更多控制。 MSI-EC 驱动程序近日迎来新补丁&#xff0c;为微星笔记本带来 Cooler Boost 功能。该功能允许提高笔记本电脑的风扇转速&…...

生成xcframework

打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式&#xff0c;可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...

ES6从入门到精通:前言

ES6简介 ES6&#xff08;ECMAScript 2015&#xff09;是JavaScript语言的重大更新&#xff0c;引入了许多新特性&#xff0c;包括语法糖、新数据类型、模块化支持等&#xff0c;显著提升了开发效率和代码可维护性。 核心知识点概览 变量声明 let 和 const 取代 var&#xf…...

java_网络服务相关_gateway_nacos_feign区别联系

1. spring-cloud-starter-gateway 作用&#xff1a;作为微服务架构的网关&#xff0c;统一入口&#xff0c;处理所有外部请求。 核心能力&#xff1a; 路由转发&#xff08;基于路径、服务名等&#xff09;过滤器&#xff08;鉴权、限流、日志、Header 处理&#xff09;支持负…...

Leetcode 3577. Count the Number of Computer Unlocking Permutations

Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现 题目链接&#xff1a;3577. Count the Number of Computer Unlocking Permutations 1. 解题思路 这一题其实就是一个脑筋急转弯&#xff0c;要想要能够将所有的电脑解锁&#x…...

dedecms 织梦自定义表单留言增加ajax验证码功能

增加ajax功能模块&#xff0c;用户不点击提交按钮&#xff0c;只要输入框失去焦点&#xff0c;就会提前提示验证码是否正确。 一&#xff0c;模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...

Spring Boot面试题精选汇总

&#x1f91f;致敬读者 &#x1f7e9;感谢阅读&#x1f7e6;笑口常开&#x1f7ea;生日快乐⬛早点睡觉 &#x1f4d8;博主相关 &#x1f7e7;博主信息&#x1f7e8;博客首页&#x1f7eb;专栏推荐&#x1f7e5;活动信息 文章目录 Spring Boot面试题精选汇总⚙️ **一、核心概…...

IT供电系统绝缘监测及故障定位解决方案

随着新能源的快速发展&#xff0c;光伏电站、储能系统及充电设备已广泛应用于现代能源网络。在光伏领域&#xff0c;IT供电系统凭借其持续供电性好、安全性高等优势成为光伏首选&#xff0c;但在长期运行中&#xff0c;例如老化、潮湿、隐裂、机械损伤等问题会影响光伏板绝缘层…...

select、poll、epoll 与 Reactor 模式

在高并发网络编程领域&#xff0c;高效处理大量连接和 I/O 事件是系统性能的关键。select、poll、epoll 作为 I/O 多路复用技术的代表&#xff0c;以及基于它们实现的 Reactor 模式&#xff0c;为开发者提供了强大的工具。本文将深入探讨这些技术的底层原理、优缺点。​ 一、I…...

RNN避坑指南:从数学推导到LSTM/GRU工业级部署实战流程

本文较长&#xff0c;建议点赞收藏&#xff0c;以免遗失。更多AI大模型应用开发学习视频及资料&#xff0c;尽在聚客AI学院。 本文全面剖析RNN核心原理&#xff0c;深入讲解梯度消失/爆炸问题&#xff0c;并通过LSTM/GRU结构实现解决方案&#xff0c;提供时间序列预测和文本生成…...

MySQL 知识小结(一)

一、my.cnf配置详解 我们知道安装MySQL有两种方式来安装咱们的MySQL数据库&#xff0c;分别是二进制安装编译数据库或者使用三方yum来进行安装,第三方yum的安装相对于二进制压缩包的安装更快捷&#xff0c;但是文件存放起来数据比较冗余&#xff0c;用二进制能够更好管理咱们M…...