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

在 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.hqwc.cn/news/323065.html

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

相关文章

【React系列】React中的CSS

本文来自#React系列教程:https://mp.weixin.qq.com/mp/appmsgalbum?__bizMzg5MDAzNzkwNA&actiongetalbum&album_id1566025152667107329) 一. React中的css方案 1.1. react 中的 css 事实上,css 一直是 React 的痛点,也是被很多开发…

C#利用openvino部署PP-TinyPose人体姿态识别

【官方框架地址】 github.com/PaddlePaddle/PaddleDetection 【算法介绍】 关键点检测算法往往需要部署在轻量化、边缘端设备上,因此长期以来都存在一个难题:精度高、速度则慢、算法体积也随之增加。而PP-TinyPose的出世彻底打破了这个僵局&#xff0c…

【MyBatis】MyBatis基础操作

文章目录 前言注解方式书写 MyBatis打印 MyBatis 日志参数传递MyBatis 增加操作返回主键 MyBatis 删除操作MyBatis 修改操作MyBatis 查找操作1. 对查询结果进行别名2. Results注解3. 开启驼峰命名(推荐) XML 配置文件方法书写 MyBatis配置数据库的相关配…

本地部署Stable Diffusion教程,亲测可以安装成功

系列文章目录 Stable Diffusion界面参数及模型使用 谷歌Colab云端部署Stable Diffusion 进行绘图 文章目录 系列文章目录前言一、Stable Diffusion是什么?二、安装前的准备1.检查自己的电脑配置是否符合要求2.下载安装Git3.下载安装Python 三、下载stable-diffusi…

CSS基本知识

文章目录 1. CSS 是什么2. 基本语法规范3. 引入方式3.1 内部样式表3.2 行内样式表3.3 外部样式 4. 选择器4.1 选择器的功能4.2 选择器的种类4.3 基础选择器4.3.1 标签选择器4.3.2 类选择器4.3.3 id 选择器4.3.4 通配符选择器 4.4 复合选择器4.4.1 后代选择器4.4.2 伪类选择器 5…

硬件开发避坑日志

FT232 串口工具会,多发和漏发0x00. 对比之下STC工具更稳定。 红外接收关 5 V 和 3.3V 工作电压的接收波形不一样。 3.3V工作不正常,接收不正常 。 5V工作是标准的NEC协议

WPF DatePicker与Calendar的使用和样式修改

什么是DatePicker,Calendar Calendar:日历(显示年月日视图控件)DatePicker:日期选择器(是一个更小的控件,点击控件时才会弹出一个日历) Calendar使用 常用属性 DisplayMode&#…

上门小程序源码开发:从0到1的完全指南

在当今数字化时代,上门服务行业迎来了巨大的发展机遇。而开发上门小程序源码,则是实现定制化、高效化服务的关键步骤之一。作为该领域的专家,我将为您呈现从0到1的完全指南,助您轻松掌握上门小程序源码开发的核心要点和技巧。 什…

手把手教你用Python打造一个语音合成系统

目录 引言 一、了解语音合成技术 1.1 什么是语音合成技术 1.2 语音合成技术的分类 二、准备所需工具和库 2.1 Python编程语言 2.2 TensorFlow深度学习框架 2.3 WaveNet模型 三、搭建语音合成系统 3.1 数据准备 3.2 数据预处理 3.3 构建WaveNet模型 3.4 训练WaveNe…

PythonStudio=vb7国人写的python可视化窗体设计器IDE,可以替代pyqt designer等设计器了

【免费】PythonStudio-1.1.5-x86最新版国人开发的python界面ide,可以制作窗体资源-CSDN文库https://download.csdn.net/download/xiaoyao961/88688447 【免费】PythonStudio-1.1.5-x64-Setup.exe国人开发的python界面ide,可以制作窗体资源-CSDN文库https…

Windows下MongoDB启动及停止服务

1.CMD黑窗口输入启动命令: net start MongoDB 2.CMD黑窗口输入停止命令: net stop MongoDB

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

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