React组件之间的8种通讯方式

news2025/1/17 21:32:30

在 React 社区,遇到最多的其中一个问题是“不同组件之间如何相互通讯”。

在网上搜索了一些答案之后,早晚会有人提到 Flux,随后问题来了:“怎么用Flux解决通讯问题?Flux是必须的吗?”。

有时候 Flux 能解决组件通讯的问题,不过它不是必须的。在本文中我们将介绍几种通讯方式,这里没有用到 Flux。

首先要说明要选择哪种通讯策略完全取决于要通讯的组件之间的关系。

下表展示了这几种通讯方式,你可以根据项目实际情况选择对应的方式。

1.Props

Props 是目前为止最常用的方式,用于在组件之间传递信息。用 props 可以把数据从父组件传递到它的子组件中。

Props 是 React 的核心功能,也是 React 的基础知识。如果还不熟悉的话,需要访问官网阅读相关文档。

2.实例方法

在父组件中可以用 refs 引用子组件,之后就可以调用子组件的实例方法了。这是另一种从父组件访问子组件的方式。

3.回调函数

方法 1 和 2 介绍了如何把数据从父组件传给子组件,如果反过来传值如何做呢?如何把数据从子组件传给它的父组件?

最简单的方式是在父组件中传递一个函数给子组件,子组件可以使用这个函数来把数据传给它的父组件。

在父组件中可以这样把一个函数作为属性传给子组件,例如:

然后子组件可以这样调用这个函数:

最后不要忘记在子组件的 propTypes 中声明这个函数:

4.事件冒泡

事件冒泡并非 React 的概念,而是浏览器中 DOM 的事件机制。和回调函数类似,它也可以把数据从子组件发送到父组件。

当你想在父组件中捕获来自子组件中的 DOM 事件时,可以采用此方法。

在上述代码中,点击子组件中的 div 元素之后,在浏览器的控制台可以看到输出了这个 div 元素。这是因为我们在父组件中定义的事件监听器成功监听到了来自子组件冒泡上来的 click 事件。

5.父组件

如果两个需要通讯的组件,它们拥有共同的父级组件,我们可以使用上述的策略组合,只是需要使用父级组件作为沟通的媒介,把数据作为父组件的 state 和方法来定义。

6.观察者模式

观察者模式是一种软件设计模式,一个对象可以在需要时发送数据到多个其他对象。

这种方式适用于所有组件,不需要时父子组件或者平级组件。

一般的做法是在 componentDidMount() 里订阅事件,在 componentWillUnmount() 里取消订阅,然后在接收事件时调用 setState() 方法。

网上有许多库实现了观察者模式,例如 PubSubJS,EventEmitter等。

7.全局变量

一般来说,使用全局变量不是最佳实践。不过它很实用,可以帮你节省大量时间。如果谨慎使用是完全没问题的。

建议定义全局变量时用 window. 明确定义,以后管理维护时会更加方便。在一个组件的生命周期或者事件监听器里设置 window.x 全局变量,然后在其他组件里就可以用 window.x 读取它了。

8.Context

Context 和 props 类似,不过它不是为单个子组件传递数据,它可以为整个子树提供数据。

Context 只可以在树中向下传递数据(父组件到子树)。可以配合回调函数来向上传递数据(子树到父组件)。

典型的可以使用 Context 的场景有在组件树中传递已登录的用户信息,首选语言,或主题。不过需要注意不要滥用它,因为那样会让组件的重用变得更加困难。

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

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

相关文章

Activiti7官方在线流程设计器下载和部署

文章目录 一、流程设计器下载二、流程设计器简单运行三、流程设计器简单使用四、流程设计器持久化持久化会遇到的常见错误 五、流程设计器汉化说明菜单汉化操作汉化 参考文档 一、流程设计器下载 官网下载地址:https://www.activiti.org/get-started 点击直接获取官…

【hcie-cloud】【16】业务上云迁移、Rainbow详述

文章目录 前言华为业务迁移解决方案概述业务上云背景概述业务迁移场景需求及挑战业务迁移的价值华为业务迁移解决方案 - 全景图华为业务迁移解决方案的优势 Rainbow迁移工具介绍Rainbow迁移原理介绍Rainbow迁移工具简介Rainbow迁移工具定位Rainbow迁移视图Rainbow迁移原理 - Wi…

CRM系统是怎样进行客户管理的?系统定制功能选择

CRM管理系统一直被视为企业增长和客户管理的支柱。从管理互动到培育潜在客户,CRM毫无疑问地彻底改变了企业与客户互动的方式。但是,在如今多变的市场环境下,这类通用化的CRM系统愈来愈无法满足具体需求。随着企业发展和演化,其具体…

算法第五天-解码异或后的数组

解码异或后的数组 题目要求 解题思路 来自[宫水三叶] 这是道模拟(重拳出击)题。 根据题目给定的规则,利用如下异或性质从头做一遍即可: 1.相同数值异或结果为0; 2.任意数值与0进行异或,结果为数值本身&am…

如何将铁威马NAS设置为固定IP?

首先你需要配置正确的TNAS的网络设置,否则TNAS 将无法连接到互联网或无法被访问。 你可以在网络接口中设置TNAS的网络接口参数。TNAS设备可能配置有一个,两个或者两个以上的网络接口。你可以对网络接口逐一进行设置。 1、登录铁威马TOS系统&#xff0c…

实现播放m3u8视频流

实现m3u8视频流,网上查了很多用video-player插件可以实现,我开始也用的这个插件,但是没能实现,提示我要安装flash插件,但是安装后,也不能使用,在网上找了一下其实是不需要安装flash插件。反正试了我用不了&…

GUI二维绘图

低级绘图命令line 有什么点就点哪里,然后连起来,没什么细节,不光滑,所以基本不会用到。 x0:0.2*pi:2*pi; ysin(x); line(x,y);%画一条sin函数线 line([-5,5],[2,2]);%画一条水平线 line([5,5],[0,2]);%画一条竖线 高级绘图命令…

并发程序设计--D4GDB调试多进程程序

使用GDB调试此程序 start后 10行进入father进程,接下来会一直在父进程不断执行程序 那么如何进入子进程? 此时杀死此程序进程 重新gdb调试,使用以下命令,再使用n,可进入子进程 那么如何同时调试父进程和子进程 上图可…

第三部分使用脚手架:vue学习(61-65)

文章目录 61 创建vue脚手架![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/f71d4324be0542209e690ab9e886d199.png)62 分析脚手架结构63 render函数64 修改默认配置65 ref 属性 61 创建vue脚手架 写完vue文件,没有脚手架做翻译,浏览器不认识…

可狱可囚的爬虫系列课程 09:通过 API 接口抓取数据

前面已经讲解过 Requests 结合 BeautifulSoup4 库抓取数据,这种方式在抓取数据时还是比较方便快捷的,但是这并不意味着所有的网站都适合这种方式,并且这也不是抓取数据的最快方式,今天我们来讲一种更快速的获取数据的方式&#xf…

深度学习课程实验三训练和测试卷积神经网络

一、 实验目的 1、学会搭建、训练和测试卷积神经网络,并掌握其应用。 2、掌握使用numpy实现卷积(CONV)和池化(POOL)层,包括正向春传播和反向传播。 二、 实验步骤 Convolutional Neural Networks: Step by Step 1、导入所需要的安装包 2、构建卷积神经…

【QT】自定义代理类

目录 1 我们为什么要使用自定义代理类? 2 自定义代理类的基本设计要求 3 自定义代理的功能 4 基于QSpinBox的自定义代理类 5 自定义代理类的使用 1 我们为什么要使用自定义代理类? 传统的模型-视图框架可以让我们实现逻辑展示相分离,我们…

查询json数组

步骤一:创建表格 首先,我们需要创建一个表格来存储包含JSON对象数组的数据。可以使用以下代码创建一个名为 my_table 的表格: CREATE TABLE my_table (id INT PRIMARY KEY AUTO_INCREMENT,json_data JSON ); 上述代码创建了一个包含两个列的…

人大金仓恒生电子助力湘财证券TA系统国产化升级

近日,人大金仓&恒生电子助力湘财证券TA(登记过户)系统国产化升级上线,系统在性能、稳定性、安全可靠性等方面均表现良好。自2022年至今,在金仓数据库的支撑下,湘财证券已完成TA及其他近30个系统的升级或…

数据结构学习笔记——查找算法中的树形查找(B树、B+树)

目录 前言一、B树(一)B树的概念(二)B树的性质(三)B树的高度(四)B树的查找(五)B树的插入(六)B树的删除 二、B树(一&#xf…

整理的6个Linux运维脚本

整理的6个Linux运维脚本 1、统计/etc/passwd 中能登录的用户,并将对应在/etc/shadow 中第二列密码提取2、查看当前连接到本机的远程IP地址3、检测本机当前用户是否为超级管理员(root)4、检查指定目录下是否存在对应文件5、查找 Linux 系统中的…

基于数据库和NER构建知识图谱流程记录

文章目录 环境准备拓扑设计构建流程设计文件流设计交互解析算法实现数据库交互NER解析相似度计算 基于数据库的文件生成从数据库中读取字段将字段后处理后保存为文件 基于文件的知识图谱构建bug修改与算法优化图数据库连接问题批量构建知识图谱问题批量删除边问题空值处理问题去…

Java重修第二天—学习”方法“

通过学习本篇文章可以掌握如下知识 1、方法的定义 2、方法在计算机中的执行流程。 3、方法使用时常见问题 4、Java中方法的参数传递机制 5、方法重载 1 方法是什么 方法是一种语法结构,它可以把一段代码实现的某种功能封装起来,以便重复利用。 方…

Selenium-java 定位元素时切换iFrame时的方法

具体方法如下图所示,如果iFrame中嵌套多层iFrame需要逐层定位到需要的那一层iFrame,完成操作后,执行该代码:driver.switchTo() .defaultContent() ; 是返回最顶部的frame

vue封装基础input组件(添加防抖功能)

先看一下效果&#xff1a; // 调用页面 <template><div><!-- v-model&#xff1a;伪双向绑定 --><my-input v-model"inputVal" label"姓名" type"textarea" /></div> </template><script> import…