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 的场景有在组件树中传递已登录的用户信息,首选语言,或主题。不过需要注意不要滥用它,因为那样会让组件的重用变得更加困难。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

C++完成Query执行sql语句的接口封装和测试

1、在LXMysql.h 创建Query执行函数 //封装 执行sql语句 if sqllen 0 strlen获取字符长度bool Query(const char*sql,unsigned long sqllen0); 2、在LXMysql.cpp编写函数 bool LXMysql::Query(const char* sql, unsigned long sqllen){if (!mysql)//如果mysql没有初始化好{c…

C/C++ BM4 合并两个排序的链表

文章目录 前言题目1. 解决方案一1.1 思路概述1.2 源码 2. 解决方案二2.1 思路阐述2.2 源码 总结 前言 这道题采用两种方式,一种是直接插入法,还有一种就是递归调用。 题目 输入两个递增的链表,单个链表的长度为n,合并这两个链表…

imgaug库指南(四):从入门到精通的【图像增强】之旅

引言 在深度学习和计算机视觉的世界里,数据是模型训练的基石,其质量与数量直接影响着模型的性能。然而,获取大量高质量的标注数据往往需要耗费大量的时间和资源。正因如此,数据增强技术应运而生,成为了解决这一问题的…

AntDB内存管理之内存上下文

1. 主题说明 AntDB的内存管理在开发时,使用了内存上下文机制来实现内存管理。本文就从AntDB的内存上下文机制出发,解析内存上下文的实现原理。AntDB的代码中,涉及到内存的处理时,经常会看到下面这样的代码。 图1:切换…

SpringBean的生命周期

SpringBean Bean的生命周期 1、首先需要明确bean对象与普通对象的区别: 对于普通的 Java 对象,当 new 的时候创建对象,然后该对象就能够使用了。一旦该对象不再被使用,则由 Java 自动进行垃圾回收。 而 Spring 中的对象是 bean,…

Gin 路由注册与请求参数获取

Gin 路由注册与请求参数获取 文章目录 Gin 路由注册与请求参数获取一、Web应用开发的两种模式1.前后端不分离模式2.前后端分离模式 二、RESTful介绍三、API接口3.1 RESTful API设计指南3.2 API与用户的通信协议3.3 RestFul API接口设计规范3.3.1 api接口3.3.2 接口文档&#xf…

C++_模板

目录 1、函数模板 1.2 模板原理 2、多个模板参数 3、模板的显示实例化 4、模板的匹配 5、类模板 结语: 前言: 在C中,模板分为函数模板和类模板,而模板的作用就是避免了重复的工作,把原本是程序员要做的重复工作…

内网DNS隐蔽隧道搭建之iodine工具

iodine iodine是基于C语言开发的,分为服务端和客户端。iodine支持转发模式和中继模式。其原理是:通过TAP虚拟网卡,在服务端建立一个局域网;在客户端,通过TAP建立一个虚拟网卡;两者通过DNS隧道连接&#xf…

YACS(上海计算机学会竞赛平台)2023年12月月赛——移动复位

移动复位 内存限制: 256 Mb时间限制: 1000 ms 题目描述 二维平面上有一个点。该点最初所在的位置称之为起点。接下来,该点接受了一串命令,每个命令可以用一个大写字母表示: R 表示该点沿 X 轴坐标正方向移动了一个单位;L 表示…

AI实景无人直播创业项目:开启自动直播新时代,一部手机即可实现增长

在当今社会,直播已经成为了人们日常生活中不可或缺的一部分。无论是商家推广产品、明星互动粉丝还是普通人分享生活,直播已经渗透到了各行各业。然而,传统直播方式存在着一些不足之处,如需现场主持人操作、高昂的费用等。近年来&a…

CentOs 环境下使用 Docker 部署 Ruoyi-Vue

CentOs 环境下使用 Docker 部署 Ruoyi-Vue RuoYi-Vue 项目下载地址 RuoYi-Vue: 🎉 基于SpringBoot,Spring Security,JWT,Vue & Element 的前后端分离权限管理系统,同时提供了 Vue3 的版本 (gitee.com) Docker 部…

x-cmd pkg | tig - git 文本模式界面

目录 简介首次用户功能特点类似工具与竞品进一步探索 简介 tig 由 Jonas Fonseca 于 2006 年使用 C 语言创建的 git 交互式文本命令行工具。旨在开启交互模式快速浏览 git 存储库的信息以及 git 命令的运行。 首次用户 使用 x tig 即可自动下载并使用 在终端运行 eval "…

NeurIPS上新 | 从扩散模型、脑电表征,到AI for Science,微软亚洲研究院精选论文

编者按:欢迎阅读“科研上新”栏目!“科研上新”汇聚了微软亚洲研究院最新的创新成果与科研动态。在这里,你可以快速浏览研究院的亮点资讯,保持对前沿领域的敏锐嗅觉,同时也能找到先进实用的开源工具。 本期“科研上新…

项目框架构建之6:编写通用主机基础类

本文是“项目框架构建”系列之6,本文介绍如何编写通用主机基础类。 1.为了构建通用主机,我们先创建主机接口IAppHost接口 接口需要有配置项,我们定义为HostConfiguration,比如我们希望用户可以设定他的工作目录,就可…

GLEE:一个模型搞定目标检测/实例分割/定位/跟踪/交互式分割等任务!性能SOTA!

GLEE,这是一个面向目标级别的基础模型,用于定位和识别图像和视频中的目标。通过一个统一的框架,GLEE实现了对开放世界场景中任意目标的检测、分割、跟踪、定位和识别,适用于各种目标感知任务。采用了一种协同学习策略,…

C之BS开发

一、 BS 概述与 boa 搭建 1.1 BS 模式开发概述 BS 模式: 浏览器与服务器模式, 即通过浏览器访问服务器的 Web 资源。 1.1.1 web 前端开发技术 主要包含: HTML 、 CSS 、 XML/JSON 、 Javascript 、 AJAX HTML 超文本标记语言 ( 英文全称…

华为欧拉安装部署:Oracle11g

一、环境准备 1、下载安装低版本的libaio包;libaio版本太高,会造成编译错误 查看libaio1库版本不能大于0.3.109 [oracles3 install]$ rpm -qa libaio libaio-0.3.110-12.el8.x86_64# 查看欧拉操作系统版本 [oraclelocalhost bin]$ cat /etc/os-release…

stable diffusion 基础教程-提示词之艺术风格用法

展现夕阳 golden hour, (rim lighting):1.2, warm tones, sun flare, soft shadows, vibrant colors, hazy glow, painterly effect, dreamy atmosphere阴影 chiaroscuro, (high contrast):1.2, dramatic shadows, bold highlights, moody atmosphere, captivating inte…

5-sql注入之文件读写

文章目录 SQL注入之文件读写1、文件读写注入的原理2、文件读写注入的条件读取文件写入文件 SQL注入之文件读写 1、文件读写注入的原理 就是利用文件的读写权限进行注入,它可以写入一句话木马,也可以读取系统文件的敏感信息。 2、文件读写注入的条件 …

02 Deep learning algorithm

Neural Networks target: inference(prediction)training my own modelpractical advice for building machine learning systemdecision Tress application: speech(语音识别) ----> images(计算机视觉)—> t…