React Native 组件间通信方式详解

在 React Native 开发中,组件间通信是核心概念之一。以下是几种主要的组件通信方式及其适用场景:

  1. 简单父子通信:使用 props 和回调函数
  2. 兄弟组件通信:提升状态到共同父组件
  3. 跨多级组件:使用 Context API
  4. 全局状态管理:Redux/MobX
  5. 完全解耦组件:事件总线
  6. 命令式操作:Refs
  7. 页面间通信:路由参数

1. 父组件向子组件通信(Props 向下传递)

最基本的通信方式,通过 props 传递数据和回调函数。

// 父组件
function ParentComponent() {const [message, setMessage] = useState('Hello from Parent');return <ChildComponent greeting={message} />;
}// 子组件
function ChildComponent({greeting}) {return <Text>{greeting}</Text>;
}

特点

  • 单向数据流
  • 简单直接
  • 适用于层级不深的组件结构

2. 子组件向父组件通信(回调函数)

通过 props 传递回调函数,子组件调用该函数与父组件通信。

// 父组件
function ParentComponent() {const handleChildEvent = (data) => {console.log('Data from child:', data);};return <ChildComponent onEvent={handleChildEvent} />;
}// 子组件
function ChildComponent({onEvent}) {return (<Button title="Send to Parent" onPress={() => onEvent('Child data')} />);
}

3. 兄弟组件通信(通过共同父组件)

function Parent() {const [sharedData, setSharedData] = useState('');return (<><SiblingA onUpdate={setSharedData} /><SiblingB data={sharedData} /></>);
}function SiblingA({onUpdate}) {return <Button title="Update" onPress={() => onUpdate('New data')} />;
}function SiblingB({data}) {return <Text>{data}</Text>;
}

4. Context API(跨层级通信)

适用于深层嵌套组件或全局状态共享。

const MyContext = React.createContext();function App() {const [value, setValue] = useState('Default');return (<MyContext.Provider value={{value, setValue}}><ParentComponent /></MyContext.Provider>);
}function ChildComponent() {const {value, setValue} = useContext(MyContext);return (<Button title="Change Value" onPress={() => setValue('Updated')} />);
}

5. 事件总线(Event Emitter)

适用于完全解耦的组件通信。

// 创建事件总线
const EventBus = new NativeEventEmitter();// 发送端组件
function Publisher() {const emitEvent = () => {EventBus.emit('customEvent', {data: 'Event data'});};return <Button title="Emit Event" onPress={emitEvent} />;
}// 接收端组件
function Subscriber() {const [message, setMessage] = useState('');useEffect(() => {const subscription = EventBus.addListener('customEvent', (event) => {setMessage(event.data);});return () => subscription.remove();}, []);return <Text>{message}</Text>;
}

6. Redux 或 MobX(状态管理库)

适用于大型应用中的复杂状态管理。

// Redux 示例
import { useSelector, useDispatch } from 'react-redux';function ComponentA() {const dispatch = useDispatch();const updateData = () => {dispatch({ type: 'UPDATE', payload: 'New data' });};return <Button title="Update Store" onPress={updateData} />;
}function ComponentB() {const data = useSelector(state => state.data);return <Text>{data}</Text>;
}

7. Refs(访问组件实例)

用于命令式地访问子组件。

function ParentComponent() {const childRef = useRef(null);const callChildMethod = () => {childRef.current.doSomething();};return (<><ChildComponent ref={childRef} /><Button title="Call Child Method" onPress={callChildMethod} /></>);
}// 需要使用 forwardRef
const ChildComponent = forwardRef((props, ref) => {useImperativeHandle(ref, () => ({doSomething: () => {console.log('Method called from parent');}}));return <Text>Child Component</Text>;
});

8. 路由参数(页面间通信)

使用 React Navigation 等路由库传递参数。

// 发送页面
function HomeScreen({ navigation }) {return (<Buttontitle="Go to Details"onPress={() => navigation.navigate('Details', { itemId: 86 })}/>);
}// 接收页面
function DetailsScreen({ route }) {const { itemId } = route.params;return <Text>Item ID: {itemId}</Text>;
}

选择建议

  1. 简单父子通信:使用 props 和回调函数
  2. 兄弟组件通信:提升状态到共同父组件
  3. 跨多级组件:使用 Context API
  4. 全局状态管理:Redux/MobX
  5. 完全解耦组件:事件总线
  6. 命令式操作:Refs
  7. 页面间通信:路由参数

最佳实践

  • 优先考虑最简单的 props 传递方式
  • 避免过度使用 Context,合理划分 Context 范围
  • 对于复杂应用,尽早引入状态管理方案
  • 谨慎使用 Refs,避免破坏 React 的数据流
  • 事件总线适合完全解耦的非父子组件通信

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

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

相关文章

TCP的可靠传输机制

TCP通过校验和、序列号、确认应答、重发控制、连接管理以及窗口控制等机制实现可靠性的传输。 先来看第一个可靠性传输的方法。 通过序列号和可靠性提供可靠性 TCP是面向字节的。TCP把应用层交下来的报文&#xff08;可能要划分为许多较短的报文段&#xff09;看成一个一个字节…

没有DBA的敏捷开发管理

前言一家人除了我都去旅游了&#xff0c;我这项请假&#xff0c;请不动啊。既然在家了&#xff0c;闲着也是闲着&#xff0c;就复盘下最近的工作&#xff0c;今天就复盘表结构管理吧&#xff0c;随系统启动的&#xff0c;不是flyway&#xff0c;而是另一个liquibase&#xff0c…

go-carbon v2.6.10发布,轻量级、语义化、对开发者友好的 golang 时间处理库

carbon 是一个轻量级、语义化、对开发者友好的 Golang 时间处理库&#xff0c;提供了对时间穿越、时间差值、时间极值、时间判断、星座、星座、农历、儒略日 / 简化儒略日、波斯历 / 伊朗历的支持。 carbon 目前已捐赠给 dromara 开源组织&#xff0c;已被 awesome-go 收录&am…

【AI News | 20250708】每日AI进展

AI Repos 1、claude-code-templates Claude Code Templates是一款全面的命令行工具&#xff0c;旨在为不同编程语言和框架&#xff08;如JavaScript/TypeScript、Python等&#xff0c;Go和Rust即将推出&#xff09;提供优化的Claude Code配置。它通过交互式设置、自动化钩子&a…

Nginx源码安装+静态站点部署指南(CentOS 7)

安装包&#xff1a;可自行前往我的飞书下载 Docs 也可以进入 nginx 官网&#xff0c;下载自己所需适应版本 nginx 开始安装nginx 1. 创建准备目录 cd /opt mkdir soft module # 创建软件包和源码解压目录 2. 安装依赖环境 yum -y install make zlib zlib-devel gcc-c l…

交换机的核心原理和作用

一、交换机的核心原理交换机是一种用于连接多台设备的网络硬件&#xff0c;其核心原理基于二层网络&#xff08;数据链路层&#xff09;的 MAC 地址寻址1. MAC 地址学习与存储当交换机接收到数据帧时&#xff0c;会读取帧中的源 MAC 地址&#xff0c;并将该地址与对应的端口号记…

【工具变量】上市公司企业金融强监管数据、资管新规数据(2001-2024年)

数据简介&#xff1a;参考顶刊《经济研究》李青原&#xff08;2022&#xff09;老师的做法&#xff0c;Post 为时间虚拟变量&#xff0c;根据资管新规实施的时间&#xff0c;当观测期为2018 年上半年及之后时&#xff0c;Post 取值1&#xff0c;否则取值0。PreFin 为资管新规实…

CSS Grid与Flexbox布局实战对比

概述 CSS布局技术在过去几年经历了重大变革&#xff0c;从传统的基于浮动和定位的方法&#xff0c;到现在强大的Flexbox和Grid布局系统。这两种现代布局方法极大地简化了复杂界面的开发过程&#xff0c;但它们各自适用于不同的场景。本文将对Flexbox和Grid进行深入比较&#x…

[Pytest][Part 4]多种测试运行方式

实现需求2&#xff1a;有两种运行测试的方式&#xff1a;通过config配置文件运行&#xff0c;测试只需要修改config配置文件cmdline 运行这里是新建一个config类来存储所有的测试配置&#xff0c;以后配置有修改的话也只需要修改这个类。根据目前的测试需求&#xff0c;config中…

平衡二叉树的删除操作

对于平衡二叉树的操作应对与考试只需要模拟出过程即可&#xff0c;且他的过程和插入的平衡方法一样&#xff0c;不一样的只是对于平衡因子的计算上。接下来我将给出方法①删除结点&#xff08;方法同“二叉排序树”&#xff09; ②一路向北找到最小不平衡子树&#xff0c;找不到…

Spark 4.0的 VariantType 类型优点以及使用分析

背景 本文基于Spark 4.0。 总结 对于半结构化的数据来说&#xff0c;我们一般会有两种方式进行存储: 第一种是存储为JSON String,这种可以保证Schema free&#xff0c;但是在使用的时候得解析为JSON&#xff0c;从而进行运算操作。 第二种是存储为Struct类型&#xff0c;这种虽…

17-C#封装,继承,多态与重载

C#封装继承多态 1. 2. 3.多态 public abstract class animal//抽象类 {public abstract void eat();//抽象方法 } public class cat : animal//继承 {public override void eat()//重写{messagebox.show("cat eat");} } public class dog: animal//继承 {public over…

恒创科技:香港站群服务器做seo站群优化效果如何

香港站群服务器做 SEO 站群优化效果如何?在当前搜索引擎优化竞争日益激烈的环境下&#xff0c;越来越多的企业开始关注站群策略这一高效的 SEO 手段。作为亚洲重要的网络枢纽&#xff0c;香港站群服务器因其独特优势&#xff0c;正成为实施 SEO 站群优化的热门选择。本文将客观…

Linux-进程管理

Linux-进程管理Linux 进程管理1. 进程的含义2. 进程状态3. 进程工作模式4. 守护进程5. 进程查看命令5.1 ps 命令5.2 top 命令5.3 pstree 命令6. 终止进程的 kill 命令7. 前后台运行8. 暂停进程9. 进程文件系统 /proc10. 定时任务管理10.1 at 命令10.2 batch 命令10.3 cron 与 c…

OpenCV图像增强秘籍:高通滤波与特效艺术

> 在数字图像处理领域,边缘是图像最富信息的区域。掌握高通滤波技术,你就能让图像中的隐藏细节"跃然纸上",甚至创造惊艳的艺术效果。 ## 一、图像增强与高通滤波基础 ### 1.1 图像增强的核心目标 图像增强不是简单的美化,而是通过技术手段**突出重要特征*…

347. 前K个高频元素

题目&#xff1a; 给你一个整数数组 nums 和一个整数 k &#xff0c;请你返回其中出现频率前 k 高的元素。你可以按 任意顺序 返回答案。 示例&#xff1a; 输入: nums [1,1,1,2,2,3], k 2 输出: [1,2] 解题思路&#xff1a; 要返回出现频率前k高的元素&#xff0c;那么我们首…

C++面试冲刺笔记1:虚函数的基本工作原理

C面试冲刺笔记1&#xff1a;虚函数的基本工作原理 前言 ​ 笔者最近开始投简历&#xff0c;出于应对之后快速的面试流程需求&#xff0c;这里准备的是将常见的C八股文进行总结&#xff0c;从而方便自己进行学习&#xff0c;检查和评估。 什么是虚函数 ​ 虚函数&#xff0c;本质…

Spring Boot 事务失效问题详解:原因、场景与解决方案

在 Spring Boot 开发中&#xff0c;事务管理是保证数据一致性和完整性的核心机制。然而&#xff0c;许多开发者在使用 Transactional 注解时&#xff0c;可能会遇到事务失效的问题&#xff0c;导致数据异常或业务逻辑错误。本文将深入分析 Spring Boot 中事务失效的常见原因&am…

Python-文件操作-StringIO和BytesIO-路径操作-shutil模块-csv,ini序列化和反序列化-argparse使用-学习笔记

序 欠4年前的一份学习笔记&#xff0c;献给今后的自己。 文件操作 冯诺依曼体系架构CPU由运算器和控制器组成 运算器&#xff0c;完成各种算数运算、逻辑运算、数据传输等数据加工处理 。 控制器&#xff0c;控制程序的执行 存储器&#xff0c;用于记忆程序和数据&#xff0c;例…

LLM的表征做减法的是什么,自然语言是一个矩阵,怎么进行减法的

LLM的表征做减法的是什么,自然语言是一个矩阵,怎么进行减法的 有个假设:就是最后一个词语融合了前面词语的信息 减法操作主要用于提取模型内部表征中的"诚实性"概念向量。具体来说,这是通过对比诚实和不诚实场景下的模型隐藏状态实现的。 import torch from t…