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

React高级特性之context

在这里插入图片描述

例1:

createContext

// 跨组件通信Context引入createContext
import React, { createContext }  from 'react'// App传数据给组件C  App -- A -- C// 1. 创建Context对象 
const { Provider, Consumer } = createContext()function SonA () {return (<div>我是组件SonA<SonC /></div>)
}// function SonC () {
//   return (
//     <div>
//       我是组件SonC
//       <Consumer >
//           {value => <div>我是{value.name}, 今年{value.age}</div>}
//       </Consumer>
//     </div>
//   )
// }
class SonC extends React.Component{render () {return (<div>我是类子组件SonC<Consumer>{value => <div>我是{value.name}, 今年{value.age}</div>}</Consumer></div>)}
}class App extends React.Component{state = {message:'this is message 666',obj: {name: 'zm',age: 25}}render () {return (<div>我是组件App<Provider value={this.state.obj}><SonA /></Provider></div>)}
}export default App// 跨组件通信Context  例如 父传孙
// Context 提供了一个无需为每层组件手动添加 props,就能在组件树间进行数据传递的方法// 1- 创建Context对象 导出 Provider 和 Consumer对象 
//    const { Provider, Consumer } = createContext()
// 2- 使用Provider包裹上层组件提供数据 
//    <Provider value={this.state.message}>
//       {/* 根组件 */}
//    </Provider>
// 3- 需要用到数据的组件使用Consumer包裹获取数据
//    <Consumer >
//      {value => /* 基于 context 值进行渲染*/}
//    </Consumer>

例2:

import React from 'react'// 创建 Context 填入默认值(任何一个 js 变量)
const ThemeContext = React.createContext('light')// 底层组件 - 函数是组件
function ThemeLink (props) {// const theme = this.context // 会报错。函数式组件没有实例,即没有 this// 函数式组件可以使用 Consumerreturn <ThemeContext.Consumer>{ value => <p>link's theme is {value}</p> }</ThemeContext.Consumer>
}// 底层组件 - class 组件
class ThemedButton extends React.Component {// 指定 contextType 读取当前的 theme context。// static contextType = ThemeContext // 也可以用 ThemedButton.contextType = ThemeContextrender() {const theme = this.context // React 会往上找到最近的 theme Provider,然后使用它的值。return <div><p>button's theme is {theme}</p></div>}
}
ThemedButton.contextType = ThemeContext // 指定 contextType 读取当前的 theme context。// 中间的组件再也不必指明往下传递 theme 了。
function Toolbar(props) {return (<div><ThemedButton /><ThemeLink /></div>)
}class App extends React.Component {constructor(props) {super(props)this.state = {theme: 'light'}}render() {return <ThemeContext.Provider value={this.state.theme}><Toolbar /><hr/><button onClick={this.changeTheme}>change theme</button></ThemeContext.Provider>}changeTheme = () => {this.setState({theme: this.state.theme === 'light' ? 'dark' : 'light'})}
}export default App

例3:

效果
在这里插入图片描述

index.tsx
在这里插入图片描述
ToolBar.tsx
在这里插入图片描述
ThemeButton.tsx
在这里插入图片描述

例4:

useContext

import { createContext, useContext } from 'react'// 创建Context对象
const Context = createContext()function ComA() {  return (<div>AAAAA ------ <ComC/></div>)
}
function ComC() {// 底层组件通过useContext函数获取数据  const num = useContext(Context)  return (<div>CCCCCC ----- {num}</div>)
}
function App() {  return (// 顶层组件通过Provider 提供数据    <Context.Provider value={99999}>     <div>666 ------ <ComA/></div>   </Context.Provider> )
}export default App// 实现步骤
// 1. 使用createContext 创建Context对象
// 2. 在顶层组件通过Provider 提供数据
// 3. 在底层组件通过useContext函数获取数据

相关文章:

React高级特性之context

例1&#xff1a; createContext // 跨组件通信Context引入createContext import React, { createContext } from react// App传数据给组件C App -- A -- C// 1. 创建Context对象 const { Provider, Consumer } createContext()function SonA () {return (<div>我是…...

【OS】操作系统课程笔记 第五章 并发性——互斥、同步和通信

并发性&#xff1a;并发执行的各个进程之间&#xff0c;既有独立性&#xff0c;又有制约性&#xff1b; 独立性&#xff1a;各进程可独立地向前推进&#xff1b; 制约性&#xff1a;一个进程会受到其他进程的影响&#xff0c;这种影响关系可能有3种形式&#xff1a; 互斥&am…...

RabbitMQ概述原理

RabbitMQ是一种消息队列中间件&#xff0c;其主要作用是在应用程序之间传输数据。它基于AMQP&#xff08;高级消息队列协议&#xff09;实现&#xff0c;可以用于不同语言和不同操作系统之间的通信。 RabbitMQ的工作原理是生产者将消息发送到队列中&#xff0c;消费者从队列中接…...

8.Covector Transformation Rules

上一节已知&#xff0c;任意的协向量都可以写成对偶基向量的线性组合&#xff0c;以及如何通过计算基向量穿过的协向量线来获得协向量分量&#xff0c;且看到 协向量分量 以 与向量分量 相反的方式进行变换。 现要在数学上确认协向量变换规则是什么。 第一件事&#xff1a;…...

RustDay04------Exercise[21-30]

21.使用()对变量进行解包 // primitive_types5.rs // Destructure the cat tuple so that the println will work. // Execute rustlings hint primitive_types5 or use the hint watch subcommand for a hint.fn main() {let cat ("Furry McFurson", 3.5);// 这里…...

OpenAI科学家谈GPT-4的潜力与挑战

OpenAI Research Scientist Hyung Won Chung 在首尔国立大学发表的一场演讲。 模型足够大&#xff0c;某些能力才会显现&#xff0c;GPT-4 即将超越拐点并在其能力上实现显着跳跃。GPT-3 和 GPT-4 之间的能力仍然存在显着差距&#xff0c;并且尝试弥合与当前模型的差距可能是无…...

Java电子病历编辑器项目源码 采用B/S(Browser/Server)架构

电子病历&#xff08;EMR,Electronic Medical Record&#xff09;是用电子技术保存、管理、传输和重现的数字化的病人的医疗记录&#xff0c;取代手写纸张病历&#xff0c;将医务人员在医疗活动过程中,使用医疗机构管理系统生成的文字、符号、图表、图形、数据、影像等数字化内…...

使用 AWS DataSync 进行跨区域 AWS EFS 数据传输

如何跨区域EFS到EFS数据传输 部署 DataSync 代理 在可以访问源 EFS 和目标 EFS 的源区域中部署代理。转至AWS 代理 AMI 列表并按 AWS 区域选择您的 AMI。对于 us-west-1&#xff0c;单击 us-west-1 前面的启动实例。 启动实例 2. 选择您的实例类型。AWS 建议使用以下实例类型之…...

设计模式~解释器模式(Interpreter)-19

解释器模式&#xff08;Interpreter Pattern&#xff09;提供了评估语言的语法或表达式的方式&#xff0c;它属于行为型模式。这种模式实现了一个表达式接口&#xff0c;该接口解释一个特定的上下文。这种模式被用在 SQL 解析、符号处理引擎等。 【俺有一个《泡MM真经》&#x…...

对象混入的实现方式

对象混入&#xff08;Object mixins&#xff09;是一种在面向对象编程中用于组合和重用代码的技术。它允许你将一个对象的属性和方法混合&#xff08;或合并&#xff09;到另一个对象中&#xff0c;从而创建一个具有多个来源的对象&#xff0c;这些来源可以是不同的类、原型或其…...

Mac 远程 Ubuntu

1. Iterm2 添加ssh 参考&#xff1a;https://www.javatang.com/archives/2021/11/29/13063392.html 2. Finder 添加远程文件管理 2.1 ubuntu 配置 安装samba sudo apt-get install samba配置 [share]path /home/USER_NAME/shared_directoryavailable yesbrowseable ye…...

黑豹程序员-h5前端录音、播放

H5支持页面中调用录音机进行录音 H5加入录音组件&#xff0c;录音后可以进行播放&#xff0c;并形成录音文件&#xff0c;其采样率固化48000&#xff0c;传言是google浏览器的BUG&#xff0c;它无法改动采样率。 大BUG&#xff0c;目前主流的支持16000hz的采样率。 录音组件 …...

Leetcode622.设计循环队列

本专栏内容为&#xff1a;leetcode刷题专栏&#xff0c;记录了leetcode热门题目以及重难点题目的详细记录 &#x1f493;博主csdn个人主页&#xff1a;小小unicorn ⏩专栏分类&#xff1a;Leetcode &#x1f69a;代码仓库&#xff1a;小小unicorn的代码仓库&#x1f69a; &…...

二十二、【形状工具组】

文章目录 基础图形多边形直线工具自定义形状工具 形状工具组画的图形是矢量图形&#xff0c;在放大和缩小后像素不变看起来不会模糊&#xff0c;位图和矢量图形的存储方式不一样&#xff0c;位图的存储方式是按各个像素的数据来进行存储的&#xff0c;而矢量图形是根据算法来进…...

设计模式~迭代器模式(Iterator)-20

目录 迭代器模式(Iterator) &#xff08;1&#xff09;优点 &#xff08;2&#xff09;缺点 &#xff08;3&#xff09;使用场景 &#xff08;4&#xff09;注意事项 &#xff08;5&#xff09;应用实例&#xff1a; 代码 迭代器模式(Iterator) 迭代器模式&#xff08…...

亳州市的自然风光与旅游资源:欣赏安徽省中部的壮丽景色

亳州市是中国安徽省的一个地级市&#xff0c;位于该省的中部。 亳州市辖区包括谯城区、涡阳县、蒙城县和利辛县等地。亳州市拥有悠久的历史和丰富的文化遗产&#xff0c;同时也以其独特的自然风光而闻名。 首先&#xff0c;让我们来了解一下亳州的历史和景点。亳州的历史可以…...

windows安装nvm以及解决yarn问题

源代码 下载 下一步一下步安装即可 检查是否安装成功 nvm出现上面的代码即可安装成功 常用命令 查看目前安装的node版本 nvm list [available]说明没有安装任何版本&#xff0c;下面进行安装 nvm install 18.14使用该版本 node use 18.14.2打开一个新的cmd输入node -…...

【TA 挖坑04】薄膜干涉 镭射材质 matcap

镭射材质&#xff0c;相对物理的实现&#xff1f; 万物皆可镭射&#xff0c;个性吸睛的材质渲染技术 - 知乎 (zhihu.com) 薄膜干涉材质&#xff0c;matcap更trick的方法&#xff1f;matcapremap&#xff0c; MatCap原理介绍及应用 - 知乎 (zhihu.com) 庄懂的某节课也做了mat…...

OpenCV13-图像噪声:椒盐噪声和高斯噪声

OpenCV13-图像噪声&#xff1a;椒盐噪声和高斯噪声 1.噪声种类2.椒盐噪声3.高斯噪声 1.噪声种类 图像噪声是指图像中的随机或非随机的不希望的视觉扰动。它可以出现在数字图像中的各种形式&#xff0c;例如颗粒状噪声、条纹、斑点、模糊、失真等。图像噪声可能是由于图像采集过…...

天堂2服务器基本设置

[system] server_nameLocal Server ——〉服务器名称 server_rulesPvP http_host127.0.0.1 ——〉HTTP注册页面&#xff08;需先搭建IIS服务器&#xff09; http_port8080 rs_host127.0.0.1——〉填你IP rs_port3724 ws_host127.0.0.1 ——〉填你的IP就对啦 ws_port8085 wor…...

SpringBoot-17-MyBatis动态SQL标签之常用标签

文章目录 1 代码1.1 实体User.java1.2 接口UserMapper.java1.3 映射UserMapper.xml1.3.1 标签if1.3.2 标签if和where1.3.3 标签choose和when和otherwise1.4 UserController.java2 常用动态SQL标签2.1 标签set2.1.1 UserMapper.java2.1.2 UserMapper.xml2.1.3 UserController.ja…...

装饰模式(Decorator Pattern)重构java邮件发奖系统实战

前言 现在我们有个如下的需求&#xff0c;设计一个邮件发奖的小系统&#xff0c; 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式&#xff08;Decorator Pattern&#xff09;允许向一个现有的对象添加新的功能&#xff0c;同时又不改变其…...

应用升级/灾备测试时使用guarantee 闪回点迅速回退

1.场景 应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。 相对于RMAN恢复需要很长时间&#xff0c; 数据库闪回只需要几分钟。 2.技术实现 数据库设置 2个db_recovery参数 创建guarantee闪回点&#xff0c;不需要开启数据库闪回。…...

使用van-uploader 的UI组件,结合vue2如何实现图片上传组件的封装

以下是基于 vant-ui&#xff08;适配 Vue2 版本 &#xff09;实现截图中照片上传预览、删除功能&#xff0c;并封装成可复用组件的完整代码&#xff0c;包含样式和逻辑实现&#xff0c;可直接在 Vue2 项目中使用&#xff1a; 1. 封装的图片上传组件 ImageUploader.vue <te…...

Springcloud:Eureka 高可用集群搭建实战(服务注册与发现的底层原理与避坑指南)

引言&#xff1a;为什么 Eureka 依然是存量系统的核心&#xff1f; 尽管 Nacos 等新注册中心崛起&#xff0c;但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制&#xff0c;是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...

Linux C语言网络编程详细入门教程:如何一步步实现TCP服务端与客户端通信

文章目录 Linux C语言网络编程详细入门教程&#xff1a;如何一步步实现TCP服务端与客户端通信前言一、网络通信基础概念二、服务端与客户端的完整流程图解三、每一步的详细讲解和代码示例1. 创建Socket&#xff08;服务端和客户端都要&#xff09;2. 绑定本地地址和端口&#x…...

【Go语言基础【13】】函数、闭包、方法

文章目录 零、概述一、函数基础1、函数基础概念2、参数传递机制3、返回值特性3.1. 多返回值3.2. 命名返回值3.3. 错误处理 二、函数类型与高阶函数1. 函数类型定义2. 高阶函数&#xff08;函数作为参数、返回值&#xff09; 三、匿名函数与闭包1. 匿名函数&#xff08;Lambda函…...

JVM 内存结构 详解

内存结构 运行时数据区&#xff1a; Java虚拟机在运行Java程序过程中管理的内存区域。 程序计数器&#xff1a; ​ 线程私有&#xff0c;程序控制流的指示器&#xff0c;分支、循环、跳转、异常处理、线程恢复等基础功能都依赖这个计数器完成。 ​ 每个线程都有一个程序计数…...

2025年渗透测试面试题总结-腾讯[实习]科恩实验室-安全工程师(题目+回答)

安全领域各种资源&#xff0c;学习文档&#xff0c;以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具&#xff0c;欢迎关注。 目录 腾讯[实习]科恩实验室-安全工程师 一、网络与协议 1. TCP三次握手 2. SYN扫描原理 3. HTTPS证书机制 二…...

【Nginx】使用 Nginx+Lua 实现基于 IP 的访问频率限制

使用 NginxLua 实现基于 IP 的访问频率限制 在高并发场景下&#xff0c;限制某个 IP 的访问频率是非常重要的&#xff0c;可以有效防止恶意攻击或错误配置导致的服务宕机。以下是一个详细的实现方案&#xff0c;使用 Nginx 和 Lua 脚本结合 Redis 来实现基于 IP 的访问频率限制…...