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

待我称王封你为后i 2023-10-01 12:39 12阅读 0赞

**目录**

1.⽗组件向⼦组件通讯

2.⼦组件向⽗组件通讯

3.兄弟组件通信

4.跨层级通信

5.发布订阅模式

6.全局状态管理⼯具

--------------------

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

#### 1.⽗组件向⼦组件通讯 ####

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

#### **2.⼦组件向⽗组件通讯** ####

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

#### 3.兄弟组件通信 ####

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

### 4.跨层级通信 ###

> **可以采用 React 中的 `Context` 来实现跨越多层的全局数据通信。**
> 
> `Context` 设计的⽬的是为在⼀个组件树中共享 “全局” 数据，如：当前已登录的⽤户、界面主题、界面语⾔等信息。

#### 5.发布订阅模式 ####

> 发布者发布事件，订阅者监听到事件后做出反应。
> 
> 我们可以通过**引⼊ `event` 模块**进⾏此种方式的通信。

#### 6.全局状态管理⼯具 ####

> 可以借助**`Redux` 或 `Mobx`** 等全局状态管理⼯具进⾏通信，它们会维护⼀个全局状态中⼼（Store），并可以根据不同的事件产⽣新的状态。

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC_size_16_color_FFFFFF_t_70_g_se_x_16][]

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC_size_16_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/4667210145f6480db6adc2f0342a5309.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC,size_16,color_FFFFFF,t_70,g_se,x_16