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

【React全家桶】reac组件通信

🎞️🎞️🎞️ 博主主页: 糖 -O-


👉👉👉 react专栏:react全家桶


🌹🌹🌹希望各位博主多多支持!!!

组件通信的方式

1. 父子组件通信方式

✨父子组件之间的通信很常见,其中父组件可以通过props,原型方法向子组件通信,同时子组件也可以用回调函数,事件冒泡向父组件通信

(1)父传子

  • 原型方法

父组件通过React.createRef()创建Ref,保存在实例属性myRef上。父组件
中,渲染子组件时,定义一个Ref属性,值为刚创建的myRef。

父组件调用子组件的myFunc函数,传递一个参数,子组件接收到参数,打印出参数。

  • this.props

name作为props由父组件传递给子组件,子组件拿到name后,渲染在页面上。参数有父组件传递给子组件

import React, { Component, Fragment } from 'react';class Son extends Component {myFunc(name) {console.log(name);}render() {return <></>;}
}
// 父组件
export default class Father extends Component {constructor(props) {super(props);// 创建Ref,并保存在实例属性myRef上this.myRef = React.createRef();}componentDidMount() {// 调用子组件的函数,传递一个参数this.myRef.current.myFunc('Jack');}render() {return (<><Son ref={this.myRef} /></>);}
}

(2)子传父

  • 回调函数

  • 事件冒泡

在子组件内部,修改了父组件中的值,从而完成了子组件向父组件通信

import React, { Component } from 'react'
class Navbar extends Component{render(){return <div style={{background:"red"}}><button onClick={()=>{console.log("子通知父, 让父的isSHow 取反。",this.props.event) this.props.event() //调用父组件传来啊的回调函数}}>click</button><span>navbar</span></div>}
}
class Sidebar extends Component{render(){return <div style={{background:"yellow",width:"200px"}}> <ul><li>11111</li></ul></div>}
}export default class App extends Component {state = {isShow:false}handleEvent = ()=>{this.setState({isShow:!this.state.isShow})// console.log("父组件定义的event事件")}render() {return (<div><Navbar event={this.handleEvent}/>{/* <button onClick={()=>{this.setState({isShow:!this.state.isShow})}}>click</button> */}{this.state.isShow && <Sidebar/>}</div>)}
}/*
父传子 :属性,
子传父: 回调函数 callback
*/
2. 非父子组件通信方式

👉状态提升

React中的状态提升概括来说,就是将多个组件需要共享的状态提升到它们最近的父组件上.在父组件上改变这个状态然后通过props

👉发布订阅模式实现

👉context状态树传参

a. 先定义全局context对象
import React from 'react'
const GlobalContext = React.createContext()
export default GlobalContext
b. 根组件引入GlobalContext,并使用GlobalContext.Provider(生产者)
//重新包装根组件 class App {}
<GlobalContext.Provider
value={{
name:"kerwin",
age:100,
content:this.state.content,
show:this.show.bind(this),
hide:this.hide.bind(this)
}}
>
<之前的根组件></之前的根组件>
</GlobalContext.Provider>
c. 任意组件引入GlobalContext并调用context,使用GlobalContext.Consumer(消费者)
<GlobalContext.Consumer>
{
context => {
this.myshow = context.show; //可以在当前组件任意函数触发
this.myhide = context.hide;//可以在当前组件任意函数触发
return (
<div>
{context.name}-{context.age}-{context.content}
</div>
)
}
}
</GlobalContext.Consumer>

注意:GlobalContext.Consumer内必须是回调函数,通过context方法改变根组件状态

context优缺点:

优点:跨组件访问数据

缺点:react组件树种某个上级组件shouldComponetUpdate 返回false,当context更新时,不会引起下级组件更新

在这里插入图片描述

相关文章:

【React全家桶】reac组件通信

&#x1f39e;️&#x1f39e;️&#x1f39e;️ 博主主页&#xff1a; 糖 &#xff0d;O&#xff0d; &#x1f449;&#x1f449;&#x1f449; react专栏&#xff1a;react全家桶 &#x1f339;&#x1f339;&#x1f339;希望各位博主多多支持&#xff01;&#xff01;&a…...

2023,再转行去做软件测试还有前途吗?

近年来&#xff0c;以云计算、移动互联网、物联网、工业互联网、人工智能、大数据及区块链等新一代信息技术构建的智能化应用和产品出现爆发式增长&#xff0c;突破了传统对于软件形态的认知&#xff0c;软件形态正以各种展现方式诠释着对新型智能软件的定义。这也使得软件的质…...

Java程序API数据接口

API&#xff1a;应用程序接口&#xff08;API&#xff1a;Application Program Interface&#xff09; 一、使用数据接口的作用 1、封装逻辑 数据接口从数据库查询出数据&#xff0c;并组织成json格式&#xff0c;这个逻辑如果在每个终端都写一遍&#xff0c;那样将编写大量…...

剑指offer 7 数组中和为0的三个数

此问题属于nsum问题&#xff0c;题目链接&#xff1a;力扣 要求在数组中找到不重复的三元组&#xff0c;三个数加起来为0&#xff0c;且每个下标只能用一次。而且需要返回所有这样的不重复数组。 1. 排序 双指针 1. 「不重复」的本质是什么&#xff1f;我们保持三重循环的大…...

DockerFile

大家想想&#xff0c;Nginx&#xff0c;tomcat&#xff0c;mysql 这些镜像都是哪里来的&#xff1f;官方能写&#xff0c;我们不能写吗&#xff1f; 我们要研究自己如何做一个镜像&#xff0c;而且我们写的微服务项目以及springboot打包上云部署&#xff0c;Docker就是最方便的…...

Vue-Router 介绍及路由原理分析

文章目录Vue-Router 路由模式单页面与传统页面跳转的区别Hash 模式History 模式abstract 模式原理解析Hash 模式原理History 模式原理路由使用引入 Vue-Router获取全局路由跳转参数的变化获取路由中带的参数重定向页面Vue-Router 路由模式 单页面与传统页面跳转的区别 单页面…...

git代码提交后jenkins构建和自动部署

利用jenkins和gitlab的webhook结合&#xff0c;实现提交代码之后&#xff0c;自动触发jenkins的构建。顺带介绍一下通过触发器构建&#xff0c;比如直接通过url去触发的方式。 一、jenkins结合webhook 1、jenkins配置 a、首先jenkins得需要安装两个gitlab的插件&#xff1a;(…...

2023面试题目总结

项目遇到的问题难点&#xff1f; 老项目版本过低(angular4),相关框架太少&#xff0c;需要升级成新框架。 1.single-spa 2.qiankun 3.iframe 样式环境隔离/js隔离/公共依赖的加载 JS 原型&#xff0c;原型链&#xff0c;new 原型是存放公共属性地方&#xff0c;所有实例都…...

Vue常用指令及声明周期

文章目录知识点前端开发环境配置v-text && v-htmlv-if、v-else && v-showv-forv-onv-modelv-bind、v-cloak、v-pre&&v-once全局 API 是什么Vue.directive 自定义组件Vue.directive 是什么自定义组件回调函数参数自定义组件的生命周期Vue.set 全局操作为…...

MariaDB 成功敲钟上市 | 它与 Navciat 缘起 10 年前

MariaDB 敲钟上市2022 年底&#xff0c;云数据库公司 MariaDB 与 Angel Pond Holdings 公司完成合并&#xff0c;并在纽交所上市。新公司更名为 MariaDB&#xff0c;MySQL 之父奋斗了13年终敲钟。这标志着 MariaDB 开启新篇章。无论从开源还是商业之路&#xff0c;都将成为业内…...

LESS模型与随机森林

模型学习 1 随机森林 https://blog.csdn.net/weixin_35770067/article/details/107346591? 森林就是建立了很多决策树&#xff0c;把很多决策树组合到一起就是森林。 这些决策树都是为了解决同一任务建立的&#xff0c;最终的目标也都是一致的&#xff0c;最后将其结果来平均…...

如何利用Power Virtual Agents机器人实现成绩查询服务

今天我们继续介绍如何利用Power Virtual Agents来实现成绩查询服务。设计思路是在PVA聊天机器人的对话框中输入学生的姓名和学号来进行成绩的查询。首先&#xff0c;在Microsoft 365的OneDrive中制作一个Excel格式的成绩单。 可以将学生的学号、姓名、各学科成绩进行添加。 在P…...

flavor 配置

文章目录1. flavorDimensions1.1 单维度1.2 多维度2. BuildConfig3. sourceSets4. 参考资料1. flavorDimensions 与 productFlavors 配合使用使用 flavorDimensions 定义风味维度&#xff0c;维度越多&#xff0c;能打出的渠道包越丰富 1.1 单维度 defaultConfig {...flavor…...

《第一行代码》 第五章:详解广播机制

如果你了解网络通信原理应该会知道&#xff0c;在一个 IP 网络范围中最大的IP 地址是被保留作为广播地址来使用的。比如某个网络的 IP 范围是 192.168.0XXX&#xff0c;子网掩码是255.255.255.0那么这个网络的广播地址就是 192.168.0255广播数据包会被发送到同-网络上的所有端口…...

Leetcode(每日一题)——1139. 最大的以 1 为边界的正方形

摘要 1139. 最大的以 1 为边界的正方形 一、以1为边界的最大正方形 1.1 动态规划 第530题需要正方形所有网格中的数字都是1&#xff0c;只要搞懂动态规划的原理&#xff0c;代码就非常简洁。而这题只要正方形4条边的网格都是1即可&#xff0c;中间是什么数字不用管。 这题…...

YOLOv5:GitHub两万八Star项目

来源&#xff1a;投稿 作者&#xff1a;王同学 编辑&#xff1a;学姐 Yolov5详解 官方源码仓库&#xff1a;https://github.com/ultralytics/yolov5 相关论文&#xff1a;未发表&#xff08;改进点都被你们抢先发了&#xff09; 0 前言 截止到2022年7月&#xff0c;Yolov5项…...

袋鼠云产品功能更新报告04期丨2023年首次,产品升级“狂飙”

新的一年我们加紧了更新迭代的速度&#xff0c;增加了数据湖平台EasyLake和大数据基础平台EasyMR&#xff0c;超40项功能升级优化。我们将继续保持产品升级节奏&#xff0c;满足不同行业用户的更多需求&#xff0c;为用户带来极致的产品使用体验。 以下为袋鼠云产品功能更新报…...

如何在Power Virtual Agents中使用Power Automate

今天我们来介绍一下如何在Power Virtual Agents中使用PowerAutomate。我们以通过在PVA聊天机器人的对话框中输入“发布通知”后会把预设好的通知信息自动发布到Teams中的某个团队中为例。首先进入PVA聊天机器人编辑界面后选择“主题”-“新建主题”。 在“新建主题”中添加“触…...

BXC6332A第二代智能头盔方案助力电动车市场,为安全保驾护航

随着2020年6月1日起&#xff0c;公安部交管局在全国开展“一盔一带”安全守护行动&#xff0c;摩托车、电动车驾驶人乘车人按照规定正确使用头盔&#xff0c;是保障司乘安全的一道重要屏障&#xff0c;据统计&#xff0c;摩托车、电动自行车驾乘人员死亡事故中约80%为颅脑损伤致…...

浮点数值计算精度丢失问题剖析及解决方法

文章目录1、原因分析2、解决方法2.1、Java中使用 BigDecimal 类2.2、JavaScript 中解决计算精度丢失的问题3、使用建议1、原因分析 首先我们来看个反直觉的浮点数值计算 System.out.println(0.3*3);有的同学可能要问为啥不是0.9&#xff1f; 首先要知道为什么会产生这个问题…...

字符串匹配 - 模式预处理:朴素算法(Naive)(暴力破解)

朴素的字符串匹配算法又称为暴力匹配算法&#xff08;Brute Force Algorithm&#xff09;&#xff0c;最为简单的字符串匹配算法。算法简介朴素的字符串匹配算法又称为暴力匹配算法&#xff08;Brute Force Algorithm&#xff09;&#xff0c;它的主要特点是&#xff1a;没有预…...

CVE-2021-42278 CVE-2021-42287域内提权漏洞

漏洞介绍2021 年 11 月 9 日&#xff0c;国外研究员在推特上发布了AD相关的 CVE&#xff0c;CVE-2021-42278 & CVE-2021-42287 &#xff0c;两个漏洞组合可导致域内普通用户权限提升至域管权限。CVE-2021-42278&#xff1a;是一个安全绕过漏洞&#xff0c;允许通过修改机器…...

关于IcmpSendEcho2的使用和回调问题

由于我的需求是短时间内ping多台机子&#xff0c;所以需要异步执行&#xff0c;微软提供的例子是同步方式的&#xff0c;根据微软官方提供的icmpSendEcho2 函数的信息 &#xff0c;我需要定义一个空的宏PIO_APC_ROUTINE_DEFINED &#xff0c;定义完之后&#xff0c;编译又出现…...

XQuery 术语

在 XQuery 中&#xff0c;有七种节点&#xff1a;元素、属性、文本、命名空间、处理指令、注释、以及文档节点&#xff08;或称为根节点&#xff09;。 XQuery 术语 节点 在 XQuery 中&#xff0c;有七种节点&#xff1a;元素、属性、文本、命名空间、处理指令、注释、以及文…...

会议论文分享-Security22-状态感知符号执行

Ferry: State-Aware Symbolic Execution for Exploring State-Dependent Program Paths1.引言2.问题陈述与分析2.1.实现状态感知符号执行的挑战2.2.真实程序的特征2.3.Ferry的模型2.3.1.程序状态的定义2.3.2.状态描述变量的特征3.Design3.1.Overview of Ferry3.2.状态描述变量识…...

吴恩达深度学习笔记(八)——卷积神经网络(上)

一、卷积相关 用一个ff的过滤器卷积一个nn的图像&#xff0c;假如padding为p&#xff0c;步幅为s&#xff0c;输出大小则为&#xff1a; [n2p−fs1][n2p−fs1][\frac{n2p-f}{s}1][\frac{n2p-f}{s}1][sn2p−f​1][sn2p−f​1] []表示向下取整&#xff08;floor) 大部分深度学习…...

14 基数排序(桶排序)

文章目录1 基数排序基本思想2 基数排序的代码实现2.1 java2.2 scala3 基数排序总结1 基数排序基本思想 1) 基数排序&#xff08;radix sort&#xff09;属于“分配式排序”&#xff08;distribution sort&#xff09;&#xff0c;又称“桶子法”&#xff08;bucket sort&#…...

汉明距离Java解法

两个整数之间的 汉明距离 指的是这两个数字对应二进制位不同的位置的数目。 给你两个整数 x 和 y&#xff0c;计算并返回它们之间的汉明距离。 例&#xff1a; 输入&#xff1a;x 1, y 4 输出&#xff1a;2 解释&#xff1a; 1 (0 0 0 1) 4 (0 1 0 0) ↑ ↑ 上…...

Netty服务端请求接受过程源码剖析

目标 服务器启动后&#xff0c;客户端进行连接&#xff0c;服务器端此时要接受客户端请求&#xff0c;并且返回给客户端想要的请求&#xff0c;下面我们的目标就是分析Netty 服务器端启动后是怎么接受到客户端请求的。我们的代码依然与上一篇中用同一个demo&#xff0c; 用io.…...

金三银四春招特供|高质量面试攻略

&#x1f530; 全文字数 : 1万5千 &#x1f552; 阅读时长 : 20min &#x1f4cb; 关键词 : 求职规划、面试准备、面试技巧、谈薪职级 &#x1f449; 公众号 : 大摩羯先生 本篇来聊聊一个老生常谈的话题————“面试”。利用近三周工作午休时间整理了这篇洋洋洒洒却饱含真诚…...

百度网站备案/推广网络推广平台

深圳市栢旺电子有限公司为您详细解读eBavQ安庆FPC板快速打样的相关知识与详情&#xff0c;3、基板生成单面板 使用纯铜箔质料正在电路造程中&#xff0c;别离正在先后正在两面各加一层庇护膜&#xff0c;成为一种只要单层导体但正在电路板的双面都有导体露出的电路板。 4、基板…...

大庆绿色出行app/优化设计七年级上册语文答案

1 简介 单例模式&#xff08;Singleton Pattern&#xff09;是 Java 中最简单的设计模式之一。这种类型的设计模式属于创建型模式&#xff0c;它提供了一种创建对象的最佳方式。 定义&#xff1a;确保一个类只有一个实例&#xff0c;而且自行实例化并向整个系统提供这个实例。…...

wordpress 双侧边栏/黄页88网推广服务

我的SQL SEVER 2005是2010年12装的 那时候一直在用&#xff0c;后来自己的PC不想用来编程了所以就把 PC上面的SQL服务都给禁掉了。现在的情况是怎么都连不上本地数据库sqlexpress倒是可以连接上。有没有什么办法能 解决这个问题&#xff0c; 请大家帮忙解决一下。标题: 连接到…...

专业商城网站建设报价/中央广播电视总台

微软官方博客于 2 月初再次发布提示&#xff0c;将会在 3 月 9 日停止对经典版 Edge 浏览器的技术支持&#xff0c;于 4 月 13 日彻底放弃经典版 Edge 浏览器。微软在博客中指出&#xff0c;新版微软 Edge 正在取代传统的 Edge&#xff0c;数百万用户已经升级到基于 chromium 的…...

虚拟云手机免费永久/湖南seo优化按天付费

平时开发中if-else用的多吗&#xff1f;其实这是个再正常不过的coding习惯&#xff0c;当我们代码量小的时候用来做条件判断是再简单不过的了。但对于优秀程序员来说&#xff0c;这并不是好代码&#xff0c;为啥&#xff1f;抛开剂量谈毒性都是耍流氓在使用条件判断语句的地方&…...

ppt做视频 模板下载网站/足球世界积分榜

总体如下图svn服务器也是程序的开发测试服务器&#xff0c;文件分发服务器从svn服务器上拿到文件然后分发到线上各个web服务器&#xff08;具体视公司服务器架构而定&#xff09;。##svn服务器的搭建##在这里模拟开发测试环境&#xff08;依据实际情况不同&#xff09;&#xf…...