React 组件的通信方式
在 React 应用开发中,组件之间的通信是构建复杂用户界面和交互逻辑的关键。正确地实现组件通信能够让我们的应用更加灵活和易于维护。以下是几种常见的 React组件通信方式。

一、父子组件通信
1. 通过 props 传递数据(父组件向子组件传递数据)
- 原理:
在 React 中,props 是一种从父组件向子组件传递数据的机制。父组件在渲染子组件时,可以将数据作为属性传递给子组件。子组件通过接收 props 来获取父组件传递的数据,并在自身的渲染过程中使用这些数据。这种方式遵循了单向数据流的原则,即数据从父组件流向子组件,使得数据的流动清晰可追踪。 - 示例代码:
// 父组件
import React from 'react';
import ChildComponent from './ChildComponent';function ParentComponent() {const userName = 'John Doe';const userAge = 30;return (<div><ChildComponent name={userName} age={userAge} /></div>);
}export default ParentComponent;// 子组件
import React from 'react';function ChildComponent(props) {return (<div><p>Name: {props.name}</p><p>Age: {props.age}</p></div>);
}export default ChildComponent;
2. 父组件通过回调函数接收子组件传递的数据(子组件向父组件通信)
- 原理:
当子组件需要向父组件传递数据时,父组件可以向子组件传递一个回调函数作为 props。子组件在特定的事件触发时(如按钮点击、表单提交等)调用这个回调函数,并将需要传递的数据作为参数传递给该回调函数。这样父组件就能接收到子组件传来的数据,实现反向的数据流动。 - 示例代码:
// 父组件
import React from 'react';
import ChildComponent from './ChildComponent';function ParentComponent() {const handleChildMessage = (message) => {console.log('Received message from child:', message);};return (<div><ChildComponent onMessage={handleChildMessage} /></div>);
}export default ParentComponent;// 子组件
import React from 'react';function ChildComponent(props) {const sendMessage = () => {const message = 'Hello from child!';props.onMessage(message);};return (<button onClick={sendMessage}>Send Message</button>);
}export default ChildComponent;
二、兄弟组件通信
1. 利用共同父组件实现通信
- 通过共同父组件中转数据:
当两个兄弟组件需要通信时,可以通过它们的共同父组件来实现。一个兄弟组件通过父组件传递的回调函数向父组件传递数据,父组件再将数据通过 props 传递给另一个兄弟组件。本质是父子之间通信。 - 示例代码:
// 父组件
import React from 'react';
import SiblingA from './SiblingA';
import SiblingB from './SiblingB';function ParentComponent() {const [message, setMessage] = React.useState('');const handleMessageFromA = (msg) => {setMessage(msg);};return (<div><SiblingA onSendMessage={handleMessageFromA} /><SiblingB message={message} /></div>);
}export default ParentComponent;// 兄弟组件 A
import React from 'react';function SiblingA(props) {const sendMessage = () => {const msg = 'Hello from Sibling A';props.onSendMessage(msg);};return (<button onClick={sendMessage}>Send Message to Sibling B</button>);
}export default SiblingA;// 兄弟组件 B
import React from 'react';function SiblingB(props) {return (<div>{props.message}</div>);
}export default SiblingB;
三、跨级组件通信
1. 使用 React Context API
- 原理:
React Context 提供了一种在组件树中跨多个层级共享数据的方法,无需通过一级一级地传递 props。它允许我们创建一个上下文(Context),在这个上下文中的组件都可以访问到共享的数据。当数据在顶层的 Context.Provider 中更新时,所有订阅了该 Context 的组件都会收到通知并重新渲染。 - 示例代码:
Context允许我们在组件树中传递数据,而不必手动通过Props一层层传递。
创建:
- 使用
React.createContext()创建上下文对象 - 并在组件中使用
Provider组件的value属性提供数据 - 子组件通过
Consumer或useContext获取数据。
// 创建 Context
import React from 'react';const ThemeContext = React.createContext();// 顶层组件(提供数据)
function App() {const theme = {color: 'blue',backgroundColor: 'lightblue'};return (<ThemeContext.Provider value={theme}><Header /></ThemeContext.Provider>);
}// 中间组件(无需关心 Context 数据)
function Header() {return (<div><Navigation /></div>);
}// 底层组件(使用 Context 数据)
function Navigation() {return (<ThemeContext.Consumer>{theme => (<ul style={theme}><li>Home</li><li>About</li><li>Contact</li></ul>)}</ThemeContext.Consumer>);
}
在函数式组件中,更常用的是 useContext 钩子来获取 Context 中的数据,示例如下:
import React, { useContext } from 'react';const ThemeContext = React.createContext();function App() {const theme = {color: 'blue',backgroundColor: 'lightblue'};return (<ThemeContext.Provider value={theme}><Header /></ThemeContext.Provider>);
}function Header() {return (<div><Navigation /></div>);
}function Navigation() {const theme = useContext(ThemeContext);return (<ul style={theme}><li>Home</li><li>About</li><li>Contact</li></ul>);
}
这样,无论组件嵌套层级有多深,都可以通过 Context API 方便地实现跨层级组件通信。

四、非父子关系组件通信(发布订阅模式)
1. 使用Event Bus进行通信
对于一些非父子关系且较为松散的组件通信场景,可以使用发布订阅模式。在 React 中,可以借助第三方库如 mitt 来实现。
首先安装 mitt 库:npm install mitt
例如,有组件 ComponentA 和 ComponentB,它们之间没有直接的父子或兄弟关系。在一个单独的事件总线文件 eventBus.js 中:
import mitt from'mitt';const emitter = mitt();export default emitter;
在 ComponentA 中,当某个事件发生时发布消息:
import React from'react';
import emitter from './eventBus';const ComponentA = () => {const handleClick = () => {const data = "来自组件 A 的消息";emitter.emit('customEvent', data);};return (<div><button onClick={handleClick}>触发事件</button></div>);
};export default ComponentA;
在 ComponentB 中,订阅该事件并接收数据:
import React, { useEffect } from'react';
import emitter from './eventBus';const ComponentB = () => {useEffect(() => {const subscription = emitter.on('customEvent', (data) => {console.log(`收到组件 A 消息: ${data}`);});return () => {// 组件卸载时取消订阅subscription();};}, []);return (<div><p>组件 B 等待接收消息</p></div>);
};export default ComponentB;
五、使用 Redux 等状态管理库
- 原理:
Redux 是一个可预测的状态容器,用于管理 JavaScript 应用中的状态。在 React 应用中结合 Redux,我们可以将数据存储在一个单一的 store 中。组件可以通过 dispatch 动作(action)来触发状态的改变,而通过订阅 store 的变化,组件可以获取到最新的状态。这种方式适合于大型应用中复杂的跨级组件通信场景,使得状态的管理更加集中和可维护。 - 示例代码(简化版) :
首先,安装 redux 和 react-redux 库。
// 定义 action 类型
const SET_USER_INFO = 'SET_USER_INFO';// action 创建函数
const setUserInfoAction = (userInfo) => ({type: SET_USER_INFO,payload: userInfo
});// reducer 函数
const initialState = {user: null
};
const rootReducer = (state = initialState, action) => {switch (action.type) {case SET_USER_INFO:return {...state, user: action.payload };default:return state;}
};// 创建 store
import { createStore } from 'redux';
const store = createStore(rootReducer);// 在顶层组件中 dispatch 动作
import React from 'react';
import { Provider } from 'react-redux';
import ChildComponent from './ChildComponent';function App() {const handleSetUserInfo = () => {const userInfo = { name: 'Alice', age: 25 };store.dispatch(setUserInfoAction(userInfo));};return (<Provider store={store}><button onClick={handleSetUserInfo}>Set User Info</button><ChildComponent /></Provider>);
}// 在子组件中获取 store 中的数据
import React from 'react';
import { useSelector } from 'react-redux';function ChildComponent() {const user = useSelector(state => state.user);return (<div>{user && (<p>User Name: {user.name}, Age: {user.age}</p>)}</div>);
}
相关文章:
React 组件的通信方式
在 React 应用开发中,组件之间的通信是构建复杂用户界面和交互逻辑的关键。正确地实现组件通信能够让我们的应用更加灵活和易于维护。以下是几种常见的 React组件通信方式。 一、父子组件通信 1. 通过 props 传递数据(父组件向子组件传递数据࿰…...
WAV文件双轨PCM格式详细说明及C语言解析示例
WAV文件双轨PCM格式详细说明及C语言解析示例 一、WAV文件双轨PCM格式详细说明1. WAV文件基本结构2. PCM编码方式3. 双轨PCM格式详细说明二、C语言解析WAV文件的代码示例代码说明一、WAV文件双轨PCM格式详细说明 WAV文件是一种用于存储未压缩音频数据的文件格式,广泛应用于音频…...
【ES6复习笔记】数值扩展(16)
介绍 在 JavaScript 中,数值扩展提供了一些额外的功能,使得处理数值变得更加方便。本教程将介绍一些常用的数值扩展方法和属性。 1. Number.EPSILON Number.EPSILON 是 JavaScript 表示的最小精度。它的值接近于 2.2204460492503130808472633361816E-…...
百度热力图数据日期如何选择
目录 1、看日历2、看天气 根据研究内容定,一般如果研究城市活力的话,通常会写“非重大节假日,非重大活动,非极端天气等”。南方晴天不多,有小雨或者中雨都可认为没有影响,要不然在南方很难找到完全一周没有…...
Vue.js 高级组件开发:设计模式与实践
Vue.js 高级组件开发:设计模式与实践 引言一、组合式 API 与动态依赖注入1. 基于 provide/inject 的动态依赖2. 动态依赖注入与懒加载 二、动态渲染与自定义渲染函数1. 使用 Render 函数动态生成内容2. 自定义 vnode 操作 三、复杂场景下的动态表单生成与验证四、高…...
《一文读懂卷积网络CNN:原理、模型与应用全解析》
《一文读懂卷积网络CNN:原理、模型与应用全解析》 一、CNN 基本原理大揭秘(一)从人类视觉到 CNN 灵感(二)核心组件详解 二、经典 CNN 模型巡礼(一)LeNet-5:开山鼻祖(二&a…...
MONI后台管理系统-数据敏感字段存储加密
前言: 在我们数据库中,存在很多的敏感数据,如用户表中,存在用户电话、身份证号、邮箱等属于用户的敏感信息,我们通常在存入数据库后,将其进行加密存储,以此来保证数据安全性。 …...
熟悉各类游戏设计模式的用途与限制,如 factory、strategy、mvc、object pool 等
良好的系统分析与设计能力要求开发者熟悉并正确运用各种设计模式来解决特定问题。设计模式是一种针对特定问题的通用解决方案,可提高代码的可复用性、可维护性和可扩展性。以下是对一些常见游戏设计模式的详细分析,包括其用途、限制和代码示例。 一、工厂…...
【RabbitMQ高级篇】消息可靠性问题(1)
目录 1.消息可靠性 1.1.生产者消息确认 1.1.1.修改配置 1.1.2.定义Return回调 1.1.3.定义ConfirmCallback 1.2.消息持久化 1.2.1.交换机持久化 1.2.2.队列持久化 1.2.3.消息持久化 1.3.消费者消息确认 1.3.1.演示none模式 1.3.2.演示auto模式 1.4.消费失败重试机制…...
ASP.NET |日常开发中常见问题归纳讲解
ASP.NET |日常开发中常见问题归纳讲解 前言一、性能问题1.1 数据库访问性能1.2 视图状态(在ASP.NET Web Forms 中) 二、安全问题2.1 SQL 注入2.2 跨站脚本攻击(XSS) 三、状态管理问题3.1 会话状态(Session …...
【【深入浅出TinyRisc-v】】
深入浅出TinyRisc-v 本代码参考于 https://gitee.com/liangkangnan/tinyriscv 自己理解之后又重新写了一遍 tinyriscv.v // 涓嬮潰鏄鏁翠釜top妯″潡鐨勪功鍐? module tinyriscv(input clk ,input rst_n …...
常见的限流算法
常见的限流算法 限流的定义固定窗口算法滑动窗口算法漏桶算法(推荐)令牌桶算法(推荐)限流粒度本地限流(单机限流)分布式限流(多机限流)分布式限流的实现 限流的定义 限流,也称流量控制。是指系统…...
【Leetcode 每日一题】3159. 查询数组中元素的出现位置
问题背景 给你一个整数数组 n u m s nums nums,一个整数数组 q u e r i e s queries queries 和一个整数 x x x。 对于每个查询 q u e r i e s [ i ] queries[i] queries[i],你需要找到 n u m s nums nums 中第 q u e r i e s [ i ] queries[i] q…...
xadmin后台首页增加一个导入数据按钮
xadmin后台首页增加一个导入数据按钮 效果 流程 1、在添加小组件中添加一个html页面 2、写入html代码 3、在urls.py添加导入数据路由 4、在views.py中添加响应函数html代码 <!DOCTYPE html> <html lang...
行为树详解(5)——事件驱动
【分析】 如果行为树的节点很多,那么会存在要经过很多节点才会走到动作节点的情况。显然,性能上不如状态机。 每帧都需要重新遍历一系列节点才会走到动作节点,而实际上很多条件节点在数帧内不会有变化,这是造成性能问题的重要原…...
3.若依前端项目拉取、部署、访问
因为默认RuoYi-Vue是使用的Vue2,所以需要另外去下载vue3来部署。 拉取代码 git clone https://gitee.com/ys-gitee/RuoYi-Vue3.git 安装node才能执行npm相关的命令 执行命令npm install 如果npm install比较慢的话,需要添加上国内镜像 npm install --registrhttp…...
Debian操作系统相对于Ubuntu有什么优势吗?
更高的稳定性:Debian 以其出色的稳定性闻名,得益于严格的软件包测试和发布流程。其稳定版经过长时间测试与验证,确保了系统的高度稳定,更适合对稳定性要求极高的长期运行服务器环境。而 Ubuntu 虽有稳定版本,但更新周期…...
【漏洞复现】CVE-2015-3337 Arbitrary File Reading
漏洞信息 NVD - CVE-2015-3337 Directory traversal vulnerability in Elasticsearch before 1.4.5 and 1.5.x before 1.5.2, when a site plugin is enabled, allows remote attackers to read arbitrary files via unspecified vectors. 在安装了具有“site”功能的插件以…...
win10、win11-鼠标右键还原、暂停更新
系统优化 win 10jihuo win 11jihuo鼠标右键还原暂停更新 update 2024.12.28win 10 jihuo winx,打开powershell管理员,输入以下命令,选择1并等待 irm https://get.activated.win | iex参考:https://www.bilibili.com/video/BV1TN411M72J/?sp…...
FFmpeg来从HTTP拉取流并实时推流到RTMP服务器
当使用FFmpeg来从HTTP拉取流并实时推流到RTMP服务器时,你可以使用以下命令: ffmpeg -i http://输入流地址 -c:v copy -c:a copy -f flv rtmp://RTMP服务器地址/应用名称/流名称 这是一个基本的命令示例,其中: - -i http://输入流地…...
[2025CVPR]DeepVideo-R1:基于难度感知回归GRPO的视频强化微调框架详解
突破视频大语言模型推理瓶颈,在多个视频基准上实现SOTA性能 一、核心问题与创新亮点 1.1 GRPO在视频任务中的两大挑战 安全措施依赖问题 GRPO使用min和clip函数限制策略更新幅度,导致: 梯度抑制:当新旧策略差异过大时梯度消失收敛困难:策略无法充分优化# 传统GRPO的梯…...
iOS 26 携众系统重磅更新,但“苹果智能”仍与国行无缘
美国西海岸的夏天,再次被苹果点燃。一年一度的全球开发者大会 WWDC25 如期而至,这不仅是开发者的盛宴,更是全球数亿苹果用户翘首以盼的科技春晚。今年,苹果依旧为我们带来了全家桶式的系统更新,包括 iOS 26、iPadOS 26…...
《Playwright:微软的自动化测试工具详解》
Playwright 简介:声明内容来自网络,将内容拼接整理出来的文档 Playwright 是微软开发的自动化测试工具,支持 Chrome、Firefox、Safari 等主流浏览器,提供多语言 API(Python、JavaScript、Java、.NET)。它的特点包括&a…...
WordPress插件:AI多语言写作与智能配图、免费AI模型、SEO文章生成
厌倦手动写WordPress文章?AI自动生成,效率提升10倍! 支持多语言、自动配图、定时发布,让内容创作更轻松! AI内容生成 → 不想每天写文章?AI一键生成高质量内容!多语言支持 → 跨境电商必备&am…...
蓝桥杯3498 01串的熵
问题描述 对于一个长度为 23333333的 01 串, 如果其信息熵为 11625907.5798, 且 0 出现次数比 1 少, 那么这个 01 串中 0 出现了多少次? #include<iostream> #include<cmath> using namespace std;int n 23333333;int main() {//枚举 0 出现的次数//因…...
重启Eureka集群中的节点,对已经注册的服务有什么影响
先看答案,如果正确地操作,重启Eureka集群中的节点,对已经注册的服务影响非常小,甚至可以做到无感知。 但如果操作不当,可能会引发短暂的服务发现问题。 下面我们从Eureka的核心工作原理来详细分析这个问题。 Eureka的…...
Mysql中select查询语句的执行过程
目录 1、介绍 1.1、组件介绍 1.2、Sql执行顺序 2、执行流程 2.1. 连接与认证 2.2. 查询缓存 2.3. 语法解析(Parser) 2.4、执行sql 1. 预处理(Preprocessor) 2. 查询优化器(Optimizer) 3. 执行器…...
解读《网络安全法》最新修订,把握网络安全新趋势
《网络安全法》自2017年施行以来,在维护网络空间安全方面发挥了重要作用。但随着网络环境的日益复杂,网络攻击、数据泄露等事件频发,现行法律已难以完全适应新的风险挑战。 2025年3月28日,国家网信办会同相关部门起草了《网络安全…...
数学建模-滑翔伞伞翼面积的设计,运动状态计算和优化 !
我们考虑滑翔伞的伞翼面积设计问题以及运动状态描述。滑翔伞的性能主要取决于伞翼面积、气动特性以及飞行员的重量。我们的目标是建立数学模型来描述滑翔伞的运动状态,并优化伞翼面积的设计。 一、问题分析 滑翔伞在飞行过程中受到重力、升力和阻力的作用。升力和阻力与伞翼面…...
沙箱虚拟化技术虚拟机容器之间的关系详解
问题 沙箱、虚拟化、容器三者分开一一介绍的话我知道他们各自都是什么东西,但是如果把三者放在一起,它们之间到底什么关系?又有什么联系呢?我不是很明白!!! 就比如说: 沙箱&#…...
