【 React 】React 组件之间如何通信?

相关文章:
React Context的使用方法
react Provider Consumer 使用方法

1. 是什么

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

  • 组件
  • 通信

组件是vue中最强大的功能之一,同样组件化是React的核心思想
相比vue,React的组件更加灵活和多样,按照不同的方式可以分成很多类型的组件
而通信指的是发送者通过某种媒体以某种格式来传递信息到收信者以达到某个目的,广义上,任何信息的交通都是通信
组件间通信即指组件通过某种方式来传递信息以达到某个目的

2. 如何通信

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

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

2.1 父组件向子组件传递

由于React的数据流动为单向的,父组件向子组件传递是最常见的方式
父组件在调用子组件的时候,只需要在子组件标签内传递参数,子组件通过props属性就能接收父组件传递过来的参数

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

2.2 子组件向父组件传递的

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

//父组件代码
class Parents extends Component {constructor() {super();this.state = { price: 0 };}getPrice(e) {this.setState({price: e }); }render() {return ( <div><div>price: {this.state.price}</div> {/*向子组件传入一个函数 */}<Child getPrice={this.getPrice.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> ); }}

2.3 兄弟组件之间的通信

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

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

2.4 父组件向后代组件传递

父组件向后代组件传递数据是一件最普通的事情,就像全局数据一样
使用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>

2.5 非关系组件传递

如果组件之间关系类型比较复杂的情况,建议将数据进行一个全局资源管理,从而实现通信,例如redux。关于redux的使用后续再详细介绍

3. 总结

由于React是单向数据流,主要思想是组件不会改变接收的数据,只会监听数据的变化,当数据发生变化时它们会使用接收到的新值,而不是去修改已有的值因此,可以看到通信过程中,数据的存储位置都是存放在上级位置中

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

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

相关文章

嵌入式单片机学习思路感想分享

今天看到了一个提问,原话如下: 曾经干了8年单片机工程师,对工程师从入门,到入行,再到普通,再到高级,整个路径还算清晰,比如什么阶段,会碰到什么瓶颈,怎么突破,我都经历过。 这个同学,有个典型的问题,就是学得太多且杂了,估计稍微复杂点的项目,做不出来。 现在…

Spring Boot 中@Scheduled是单线程还是多线程?

在开发Spring Boot应用程序时&#xff0c;定时任务是一项常见的需求。Spring Boot提供了Scheduled注解&#xff0c;可用于将方法标记为定时任务&#xff0c;并在预定的时间间隔内执行。那么Scheduled注解的执行方式是单线程执行&#xff0c;还是多线程执行&#xff1f;Schedule…

docker小白第十二天

docker小白第十二天 docker network简介 docker不启动时默认的网络情况。 # 停止docker服务 systemctl stop docker.socket systemctl stop docker # 查看docker镜像 docker images输入查看docker镜像命令后&#xff0c;显示未连接到docker服务器 docker启动时网络情况 sy…

协议栈对于源或目标IP地址为广播IP的ARP请求是如何处理的

我们知道:ARP协议的目的是为了地址解析,也就是知道目标主机的IP地址,通过ARP请求报文获取目标主机的MAC地址。看起来是根据IP地址解析出MAC地址,实际上是发送ARP请求报文到目标主机,目标主机通过ARP响应报文把自己的MAC地址告诉请求方。 ARP请求报文通常是一条广播以太网…

使用BBDown下载bilibili视频的方法

一款命令行式哔哩哔哩下载器. Bilibili Downloader. 下载地址 https://github.com/nilaoda/BBDown 功能 番剧下载(Web|TV|App) 课程下载(Web) 普通内容下载(Web|TV|App) 合集/列表/收藏夹/个人空间解析 多分P自动下载 选择指定分P进行下载 选择指定清晰度进行下载 下载外挂字幕…

html--bug

文章目录 html html <!DOCTYPE html> <html><head><meta charset"UTF-8"><title>老师</title><style>body {background-color: #008000;margin: 0px;cursor: none;overflow: hidden;}</style></head><bod…

SpringCloudGateway之限流集成篇

SpringCloudGateway之限流集成篇 在Spring Cloud Gateway中实现限流&#xff08;Rate Limiting&#xff09;可以通过集成Spring Cloud Gateway的熔断和限流功能以及第三方限流组件如Sentinel或Resilience4j。 SpringCloudGateway与Sentinel组件集成 添加依赖 首先确保项目包含…

88. 合并两个有序数组 (Swift版本)

题目 给你两个按 非递减顺序 排列的整数数组 nums1 和 nums2&#xff0c;另有两个整数 m 和 n &#xff0c;分别表示 nums1 和 nums2 中的元素数目。 请你 合并 nums2 到 nums1 中&#xff0c;使合并后的数组同样按 非递减顺序 排列。 注意&#xff1a;最终&#xff0c;合并…

深度解析Java JDK 1.8中Stream流的源码实现:带你探寻数据流的奥秘

文章目录 一、 Stream流概述1.1 什么是Stream流&#xff0c;以及它的主要特点和优势1.2 Stream流的基本操作&#xff1a;过滤、映射、排序等 二、 Stream流源码解析2.1 接口和基本概念2.2 创建流2.3 源码分析2.3.1 流的起始2.3.2 流的初始2.3.3 认识BaseStream2.3.4 Stream接口…

使用docker搭建kasm desktop

Kasm是一种基于Docker的解决方案&#xff0c;它可以提供Web应用程序和桌面环境的即时访问。使用Kasm&#xff0c;你可以通过Web浏览器在任何设备上安全地访问应用程序和桌面环境。下面将详细介绍如何使用Docker CLI和Docker Compose两种方式搭建Kasm Desktop&#xff0c;并解释…

java-ssm-jsp基于java的餐厅点餐系统的设计与实现

java-ssm-jsp基于java的餐厅点餐系统的设计与实现 获取源码——》公主号&#xff1a;计算机专业毕设大全

RabbitMQ:1.概述及安装

概述 AMQP协议 MQ Message Queue&#xff08;消息队列&#xff09;是在消息的传输过程中保存消息的容器&#xff0c;多用于系统之间的异步通信 AMQP Advanced Message Queuing Protocol(高级消息队列协议)是一个网络协议&#xff0c;2006年AMQP规范发布【类比HTTP】 专门为消…

Doris/StarRocks数据库教程 (PB级实时数仓大数据分析平台、大规模分布式集群架构)

一、风哥Doris/StarRocks数据库培训 (PB级实时数仓大数据分析平台、大规模分布式集群架构) 本课程由风哥发布的DorisStarRocks大数据技术课程&#xff0c;学完本课程可以掌握Doris/StarRocks数据库基础知识&#xff0c;DorisStarRocks数据库基础知识&#xff0c;DorisStarRock…

基于单片机的公交车IC卡操作系统的设计

目 录 摘 要 III Abstract IV 前 言 1 第一章 绪论 2 1.1 设计的背景和意义 2 1.2 设计的现状和发展 2 1.3 设计的目的与意义 2 第二章 总体设计 4 2.1 总体方案的设计与实现 4 2.1.1 主要设计的内容 4 2.1.2 系统的总体设计 4 2.2 系统方案论证 5 2.2.1 单片机的选择 6 2.2.2…

Ubuntu虚拟机的IP总频繁变化,导致Xshell断开连接

文章目录 一、IP变化的原因二、解决方法&#xff1a;固定IP三、参考文章 一、IP变化的原因 1.DHCP协议 虚拟机系统(Ubuntu、CentOS、UOS等Linux系统)启动后&#xff0c;加入本地局域网网络时&#xff0c;会向本地网络申请租约一个IP地址&#xff0c;租约时长不定。我这里租约时…

独立开发的轻量级简洁开源论坛BBS PHP源码 – 2023新版发布

最新的轻量级开源论坛php源码发布啦&#xff01;这是一款独立开发的论坛系统&#xff0c;可以帮助你快速地开发出你想要的网站。 如果你是PHP初学者&#xff0c;这款论坛系统非常适合你入门学习。不过&#xff0c;需要注意的是&#xff0c;由于它并没有进行商业化改造&#xf…

如何正确地设置Outlook SMTP发送电子邮件?

Outlook SMTP发送邮件配置方法&#xff1f;Outlook怎么开启SMTP&#xff1f; 在使用Outlook发送邮件时&#xff0c;正确设置SMTP服务器是确保邮件能够顺利发送的关键步骤。接下来&#xff0c;就让AokSend一起探讨如何正确地设置Outlook SMTP发送电子邮件吧&#xff01; Outlo…

Notepad++从文件夹查找文本内容

目录 一、背景二、Notepad搜索2.1 测试用例2.2 操作说明 一、背景 在日常的办公、学习或编程中&#xff0c;我们时长会遇到需要在大量文件中搜索特定文本内容的情况&#xff1a; 无论是快速定位某个项目中的代码片段&#xff1b;还是检索文档资料库中的相关信息等。 掌握如何…

义乌购关键字搜索API接口技术详解与代码示例

义乌购关键字搜索API接口技术详解与代码示例 在电子商务蓬勃发展的今天&#xff0c;义乌购作为国内知名的批发市场平台&#xff0c;为广大商家和消费者提供了丰富的商品资源。为了方便开发者快速接入义乌购平台&#xff0c;实现商品信息的搜索与获取&#xff0c;义乌购开放了关…

【golang】http.ListenAndServe源码解析

http.ListenAndServe func ListenAndServe(addr string, handler Handler) errorListenAndServe监听TCP地址addr&#xff0c;并且会使用handler参数调用Serve函数处理接收到的连接。handler参数一般会设为nil&#xff0c;此时会使用DefaultServeMux。 接下来我们看一下这个函…