React中如何实现组件间的通信?

简介: React中如何实现组件间的通信?

组件间通信⽅式一共有如下几种:

1.⽗组件向⼦组件通讯


⽗组件可以通过向⼦组件传props 的⽅式来实现父到子的通讯。

2.⼦组件向⽗组件通讯


可以采用 props + 回调 的⽅式。

当⽗组件向⼦组件传递 props 进⾏通讯时,可在该 props 中传递一个回调函数,当⼦组件调⽤该函数时,可将⼦组件中想要传递给父组件的信息作为参数传递给该函数。由于 props 中的函数作⽤域为⽗组件⾃身,因此可以通过该函数内的 setState 更新到⽗组件上。

3.兄弟组件通信


可以通过兄弟节点的共同⽗节点,再结合以上2种⽅式,由⽗节点转发信息,实现兄弟间通信。

4.跨层级通信


可以采用 React 中的 Context 来实现跨越多层的全局数据通信。

Context 设计的⽬的是为在⼀个组件树中共享 “全局” 数据,如:当前已登录的⽤户、界面主题、界面语⾔等信息。

5.发布订阅模式


发布者发布事件,订阅者监听到事件后做出反应。

我们可以通过引⼊ event 模块进⾏此种方式的通信。

6.全局状态管理⼯具


可以借助ReduxMobx 等全局状态管理⼯具进⾏通信,它们会维护⼀个全局状态中⼼(Store),并可以根据不同的事件产⽣新的状态。

image.png

相关文章
|
8月前
|
资源调度 前端开发 JavaScript
React 的antd-mobile 组件库,嵌套路由
React 的antd-mobile 组件库,嵌套路由
139 0
|
4月前
|
消息中间件 前端开发
React技术栈-组件间通信的2种方式
本文介绍了React技术栈中组件间通信的两种方式:通过props传递数据和使用消息发布(publish)-订阅(subscribe)机制,并通过实例代码展示了如何使用PubSubJS库实现跨组件通信。
64 11
React技术栈-组件间通信的2种方式
|
7月前
|
存储 前端开发 JavaScript
在React中有效地管理组件之间的通信和数据流
在React中有效地管理组件之间的通信和数据流
|
8月前
|
存储 前端开发 中间件
React组件间的通信
React组件间的通信
63 1
|
8月前
|
前端开发
React组件通信:如何优雅地实现组件间的数据传递
React组件通信:如何优雅地实现组件间的数据传递
216 0
|
8月前
|
前端开发 JavaScript API
React组件生命周期
React组件生命周期
132 1
|
8月前
|
前端开发 应用服务中间件 数据库
react服务端组件
react服务端组件
61 0
|
8月前
|
前端开发 JavaScript
快速上手React:从概述到组件与事件处理
快速上手React:从概述到组件与事件处理
|
8月前
|
资源调度 前端开发 JavaScript
React组件
React组件
67 0
|
2月前
|
前端开发 JavaScript 开发者
颠覆传统:React框架如何引领前端开发的革命性变革
【10月更文挑战第32天】本文以问答形式探讨了React框架的特性和应用。React是一款由Facebook推出的JavaScript库,以其虚拟DOM机制和组件化设计,成为构建高性能单页面应用的理想选择。文章介绍了如何开始一个React项目、组件化思想的体现、性能优化方法、表单处理及路由实现等内容,帮助开发者更好地理解和使用React。
94 9