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

React之组件通信

#一、是什么

我们将组件间通信可以拆分为两个词:

  • 组件
  • 通信

回顾Vue系列 (opens new window)的文章,组件是vue中最强大的功能之一,同样组件化是React的核心思想

相比vueReact的组件更加灵活和多样,按照不同的方式可以分成很多类型的组件

而通信指的是发送者通过某种媒体以某种格式来传递信息到收信者以达到某个目的,广义上,任何信息的交通都是通信

组件间通信即指组件通过某种方式来传递信息以达到某个目的

#二、如何通信

组件传递的方式有很多种,根据传送者和接收者可以分为如下:

  • 父组件向子组件传递
  • 子组件向父组件传递
  • 兄弟组件之间的通信
  • 父组件向后代组件传递
  • 非关系组件传递

#父组件向子组件传递

由于React的数据流动为单向的,父组件向子组件传递是最常见的方式

父组件在调用子组件的时候,只需要在子组件标签内传递参数,子组件通过props属性就能接收父组件传递过来的参数

function EmailInput(props) {return (<label>Email: <input value={props.email} /></label>);
}const element = <EmailInput email="123124132@163.com" />;

#子组件向父组件传递

子组件向父组件通信的基本思路是,父组件向子组件传一个函数,然后通过这个函数的回调,拿到子组件传过来的值

父组件对应代码如下:

class Parents extends Component {constructor() {super();this.state = {price: 0};}getItemPrice(e) {this.setState({price: e});}render() {return (<div><div>price: {this.state.price}</div>{/* 向子组件中传入一个函数  */}<Child getPrice={this.getItemPrice.bind(this)} /></div>);}
}

子组件对应代码如下:

class Child extends Component {clickGoods(e) {// 在此函数中传入值this.props.getPrice(e);}render() {return (<div><button onClick={this.clickGoods.bind(this, 100)}>goods1</button><button onClick={this.clickGoods.bind(this, 1000)}>goods2</button></div>);}
}

#兄弟组件之间的通信

如果是兄弟组件之间的传递,则父组件作为中间层来实现数据的互通,通过使用父组件传递

class Parent extends React.Component {constructor(props) {super(props)this.state = {count: 0}}setCount = () => {this.setState({count: this.state.count + 1})}render() {return (<div><SiblingAcount={this.state.count}/><SiblingBonClick={this.setCount}/></div>);}
}

#父组件向后代组件传递

父组件向后代组件传递数据是一件最普通的事情,就像全局数据一样

使用context提供了组件之间通讯的一种方式,可以共享数据,其他数据都能读取对应的数据

通过使用React.createContext创建一个context

 const PriceContext = React.createContext('price')

context创建成功后,其下存在Provider组件用于创建数据源,Consumer组件用于接收数据,使用实例如下:

Provider组件通过value属性用于给后代组件传递数据:

<PriceContext.Provider value={100}>
</PriceContext.Provider>

如果想要获取Provider传递的数据,可以通过Consumer组件或者或者使用contextType属性接收,对应分别如下:

class MyClass extends React.Component {static contextType = PriceContext;render() {let price = this.context;/* 基于这个值进行渲染工作 */}
}

Consumer组件:

<PriceContext.Consumer>{ /*这里是一个函数*/ }{price => <div>price:{price}</div>}
</PriceContext.Consumer>

#非关系组件传递

如果组件之间关系类型比较复杂的情况,建议将数据进行一个全局资源管理,从而实现通信,例如redux

相关文章:

React之组件通信

#一、是什么 我们将组件间通信可以拆分为两个词&#xff1a; 组件通信 回顾Vue系列 (opens new window)的文章&#xff0c;组件是vue中最强大的功能之一&#xff0c;同样组件化是React的核心思想 相比vue&#xff0c;React的组件更加灵活和多样&#xff0c;按照不同的方式可…...

什么是微服务架构

阅读“微服务架构”一词可能会让您直观地了解该术语的含义&#xff1a;计算架构中的小型服务。这个定义并不完全错误&#xff0c;但也不完全正确。 微服务架构通常被称为“打破整体”的一种方式。遗憾的是&#xff0c;这与《2001&#xff1a;太空漫游》无关&#xff0c;而是将…...

<%=%>模板写法

<%%> 这种写法通常称为 "内嵌式模板" 或 "模板标记"&#xff0c;在前端开发中&#xff0c;这种标记语法用于将动态数据嵌入HTML模板中。这种写法通常与模板引擎一起使用&#xff0c;这些模板引擎会根据提供的数据动态生成HTML。 不同的模板引擎可能…...

python爬取boss直聘数据(selenium+xpath)

文章目录 一、主要目标二、开发环境三、selenium安装和驱动下载四、主要思路五、代码展示和说明1、导入相关库2、启动浏览器3、搜索框定位创建csv文件招聘页面数据解析(XPATH)总代码效果展示 六、总结 一、主要目标 以boss直聘为目标网站&#xff0c;主要目的是爬取下图中的所…...

GEO生信数据挖掘(六)实践案例——四分类结核病基因数据预处理分析

前面五节&#xff0c;我们使用阿尔兹海默症数据做了一个数据预处理案例&#xff0c;包括如下内容&#xff1a; GEO生信数据挖掘&#xff08;一&#xff09;数据集下载和初步观察 GEO生信数据挖掘&#xff08;二&#xff09;下载基因芯片平台文件及注释 GEO生信数据挖掘&…...

8.Mobilenetv2网络代码实现

代码如下&#xff1a; import math import os import numpy as npimport torch import torch.nn as nn import torch.utils.model_zoo as model_zoo#1.建立带有bn的卷积网络 def conv_bn(inp, oup, stride):return nn.Sequential(nn.Conv2d(inp,oup,3,stride,biasFalse),nn.Bat…...

Spring Boot Controller

刚入门小白&#xff0c;详细请看这篇SpringBoot各种Controller写法_springboot controller-CSDN博客 Spring Boot 提供了Controller和RestController两种注解。 Controller 返回一个string&#xff0c;其内容就是指向的html文件名称。 Controller public class HelloControll…...

在网络安全、爬虫和HTTP协议中的重要性和应用

1. Socks5代理&#xff1a;保障多协议安全传输 Socks5代理是一种功能强大的代理协议&#xff0c;支持多种网络协议&#xff0c;包括HTTP、HTTPS和FTP。相比之下&#xff0c;Socks5代理提供了更高的安全性和功能性&#xff0c;包括&#xff1a; 多协议支持&#xff1a; Socks5代…...

Web测试框架SeleniumBase

首先&#xff0c;SeleniumBase支持 pip安装&#xff1a; > pip install seleniumbase它依赖的库比较多&#xff0c;包括pytest、nose这些第三方单元测试框架&#xff0c;是为更方便的运行测试用例&#xff0c;因为这两个测试框架是支持unittest测试用例的执行的。 Seleniu…...

jvm打破砂锅问到底- 为什么要标记或记录跨代引用

为什么要标记或记录跨代引用. ygc时, 直接把老年代引用的新生代对象(可能是对象区域)记录下来当做根, 这其实就是依据第二假说和第三假说, 强者恒强, 跨代引用少(存在互相引用关系的两个对象&#xff0c;是应该倾 向于同时生存或者同时消亡的). 拿ygc老年代跨代引用对象当做根…...

小程序长期订阅

准备工作 ::: tip 管理后台配置 小程序类目&#xff1a;住建&#xff08;硬性要求&#xff09; 功能-》订阅消息-》我的模版 申请模版&#xff1a;1、预约进度通知 2、申请结果通知 3、业务办理进度提醒 ::: 用户订阅一次后&#xff0c;可长期下发多条消息。目前长期性订阅…...

Studio One6.5中文版本版下载及功能介绍

Studio One是一款专业的音乐制作软件&#xff0c;由美国PreSonus公司开发。该软件提供了全面的音频编辑和混音功能&#xff0c;包括录制、编曲、合成、采样等多种工具&#xff0c;可用于制作各种类型的音乐&#xff0c;如流行音乐、电子音乐、摇滚乐等。 Studio One的主要特点…...

07-Zookeeper分布式一致性协议ZAB源码剖析

上一篇&#xff1a;06-Zookeeper选举Leader源码剖析 整个Zookeeper就是一个多节点分布式一致性算法的实现&#xff0c;底层采用的实现协议是ZAB。 1. ZAB协议介绍 ZAB 协议全称&#xff1a;Zookeeper Atomic Broadcast&#xff08;Zookeeper 原子广播协议&#xff09;。 Zook…...

云原生安全应用场景有哪些?

当今数字化时代&#xff0c;数据已经成为企业最宝贵的资产之一&#xff0c;而云计算作为企业数字化转型的关键技术&#xff0c;其安全性也日益受到重视。随着云计算技术的快速发展&#xff0c;云原生安全应用场景也越来越广泛&#xff0c;下面本文将从云原生安全应用场景出发&a…...

Step 1 搭建一个简单的渲染框架

Step 1 搭建一个简单的渲染框架 万事开头难。从萌生到自己到处看源码手抄一个mini engine出来的想法&#xff0c;到真正敲键盘去抄&#xff0c;转眼过去了很久的时间。这次大概的确是抱着认真的想法&#xff0c;打开VS从零开始抄代码。不知道能坚持多久呢。。。 本次的主题是搭…...

Excel 插入和提取超链接

构造超链接 HYPERLINK(D1,C1)提取超链接 Sheet页→右键→查看代码Sub link()Dim hl As HyperlinkFor Each hl In ActiveSheet.Hyperlinkshl.Range.Offset(0, 1).Value hl.AddressNext End Sub工具栏→运行→运行子过程→提取所有超链接地址参考&#xff1a; https://blog.cs…...

基础架构开发-操作系统、编译器、云原生、嵌入式、ic

基础架构开发-操作系统、编译器、云原生、嵌入式、ic 操作系统编译器词法分析AST语法树生成语法优化生成机器码 云原生容器开发一般遇到的岗位描述RDMA、DPDK是什么东西NFV和VNF是什么RisingWave云原生存储引擎开发实践 单片机、嵌入式雷达路线规划 ic开发 操作系统 以C和Rust…...

C++-Mongoose(3)-http-server-https-restful

1.url 结构 2.http和 http-restful区别在于对于mg_tls_opts的赋值 2.1 http和https 区分 a) port地址 static const char *s_http_addr "http://0.0.0.0:8000"; // HTTP port static const char *s_https_addr "https://0.0.0.0:8443"; // HTTP…...

git多分支、git远程仓库、ssh方式连接远程仓库、协同开发(避免冲突)、解决协同冲突(多人在同一分支开发、 合并分支)

1 git多分支 2 git远程仓库 2.1 普通开发者&#xff0c;使用流程 3 ssh方式连接远程仓库 4 协同开发 4.1 避免冲突 4.2 协同开发 5 解决协同冲突 5.1 多人在同一分支开发 5.2 合并分支 1 git多分支 ## 命令操作分支-1 创建分支git branch dev-2 查看分支git branch-3 分支合…...

ChatGPT或将引发现代知识体系转变

作为当下大语言模型的典型代表&#xff0c;ChatGPT对人类学习方式和教育发展所产生的变革效应已然引起了广泛关注。技术的快速发展在某种程度上正在“倒逼”教育领域开启更深层次的变革。在此背景下&#xff0c;教育从业者势必要学会准确识变、科学应变、主动求变、以变应变&am…...

java调用dll出现unsatisfiedLinkError以及JNA和JNI的区别

UnsatisfiedLinkError 在对接硬件设备中&#xff0c;我们会遇到使用 java 调用 dll文件 的情况&#xff0c;此时大概率出现UnsatisfiedLinkError链接错误&#xff0c;原因可能有如下几种 类名错误包名错误方法名参数错误使用 JNI 协议调用&#xff0c;结果 dll 未实现 JNI 协…...

Linux简单的操作

ls ls 查看当前目录 ll 查看详细内容 ls -a 查看所有的内容 ls --help 查看方法文档 pwd pwd 查看当前路径 cd cd 转路径 cd .. 转上一级路径 cd 名 转换路径 …...

(二)原型模式

原型的功能是将一个已经存在的对象作为源目标,其余对象都是通过这个源目标创建。发挥复制的作用就是原型模式的核心思想。 一、源型模式的定义 原型模式是指第二次创建对象可以通过复制已经存在的原型对象来实现,忽略对象创建过程中的其它细节。 📌 核心特点: 避免重复初…...

【SQL学习笔记1】增删改查+多表连接全解析(内附SQL免费在线练习工具)

可以使用Sqliteviz这个网站免费编写sql语句&#xff0c;它能够让用户直接在浏览器内练习SQL的语法&#xff0c;不需要安装任何软件。 链接如下&#xff1a; sqliteviz 注意&#xff1a; 在转写SQL语法时&#xff0c;关键字之间有一个特定的顺序&#xff0c;这个顺序会影响到…...

第25节 Node.js 断言测试

Node.js的assert模块主要用于编写程序的单元测试时使用&#xff0c;通过断言可以提早发现和排查出错误。 稳定性: 5 - 锁定 这个模块可用于应用的单元测试&#xff0c;通过 require(assert) 可以使用这个模块。 assert.fail(actual, expected, message, operator) 使用参数…...

html css js网页制作成品——HTML+CSS榴莲商城网页设计(4页)附源码

目录 一、&#x1f468;‍&#x1f393;网站题目 二、✍️网站描述 三、&#x1f4da;网站介绍 四、&#x1f310;网站效果 五、&#x1fa93; 代码实现 &#x1f9f1;HTML 六、&#x1f947; 如何让学习不再盲目 七、&#x1f381;更多干货 一、&#x1f468;‍&#x1f…...

JVM 内存结构 详解

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

嵌入式学习笔记DAY33(网络编程——TCP)

一、网络架构 C/S &#xff08;client/server 客户端/服务器&#xff09;&#xff1a;由客户端和服务器端两个部分组成。客户端通常是用户使用的应用程序&#xff0c;负责提供用户界面和交互逻辑 &#xff0c;接收用户输入&#xff0c;向服务器发送请求&#xff0c;并展示服务…...

【无标题】路径问题的革命性重构:基于二维拓扑收缩色动力学模型的零点隧穿理论

路径问题的革命性重构&#xff1a;基于二维拓扑收缩色动力学模型的零点隧穿理论 一、传统路径模型的根本缺陷 在经典正方形路径问题中&#xff08;图1&#xff09;&#xff1a; mermaid graph LR A((A)) --- B((B)) B --- C((C)) C --- D((D)) D --- A A -.- C[无直接路径] B -…...

uniapp 实现腾讯云IM群文件上传下载功能

UniApp 集成腾讯云IM实现群文件上传下载功能全攻略 一、功能背景与技术选型 在团队协作场景中&#xff0c;群文件共享是核心需求之一。本文将介绍如何基于腾讯云IMCOS&#xff0c;在uniapp中实现&#xff1a; 群内文件上传/下载文件元数据管理下载进度追踪跨平台文件预览 二…...