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

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

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

1.⽗组件向⼦组件通讯


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

2.⼦组件向⽗组件通讯


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

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

3.兄弟组件通信


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

4.跨层级通信


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

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

5.发布订阅模式


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

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

6.全局状态管理⼯具


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

image.png

相关文章
|
4月前
|
资源调度 前端开发 JavaScript
React 的antd-mobile 组件库,嵌套路由
React 的antd-mobile 组件库,嵌套路由
101 0
|
26天前
|
消息中间件 前端开发
React技术栈-组件间通信的2种方式
本文介绍了React技术栈中组件间通信的两种方式:通过props传递数据和使用消息发布(publish)-订阅(subscribe)机制,并通过实例代码展示了如何使用PubSubJS库实现跨组件通信。
44 11
React技术栈-组件间通信的2种方式
|
3月前
|
存储 前端开发 JavaScript
在React中有效地管理组件之间的通信和数据流
在React中有效地管理组件之间的通信和数据流
|
4月前
|
前端开发
React组件通信:如何优雅地实现组件间的数据传递
React组件通信:如何优雅地实现组件间的数据传递
137 0
|
4月前
|
存储 前端开发 中间件
React组件间的通信
React组件间的通信
43 1
|
4月前
|
前端开发 JavaScript API
React组件生命周期
React组件生命周期
105 1
|
4月前
|
前端开发 应用服务中间件 数据库
react服务端组件
react服务端组件
45 0
|
4月前
|
前端开发 JavaScript
快速上手React:从概述到组件与事件处理
快速上手React:从概述到组件与事件处理
|
4月前
|
资源调度 前端开发 JavaScript
React组件
React组件
57 0
|
前端开发 JavaScript
组件与props (精读React官方文档—04)
组件与props (精读React官方文档—04)
96 0

热门文章

最新文章