# 通信

![组件之间的关系图谱](/files/-LMDGBKGeCRFew9mqLQP)

## 简单通信

### 父传子

通讯是单向的，数据必须是由一方传到另一方。在 React 中，父组件可以向子组件通过传 props 的方式，向子组件进行通讯。

[demo](https://jsbin.com/rixofod/1/edit?html,js,output)

### 子传父

子组件向父组件通信，同样也需要父组件向子组件传递 props 进行通信，只是父组件传递的是**作用域为父组件自身的函数**，子组件调用该函数，将子组件想要传递的信息作为参数，传递到父组件的作用域中。

[demo](https://jsbin.com/gulebam/2/edit?html,js,output)

## 复杂通信

复杂通信包括 **多级嵌套组件通信** 和 **兄弟组件通信**，通信的方式基本上差不多，项目里面主要是三种方式：

### 方式一：Redux 统一管理状态

在 `container` 里面直接在 `mapStateToProps` 里面从状态树或通过 `selector` 获取父组件的状态。

{% hint style="success" %}
**推荐**：超过两个层级的通信，推荐使用 Redux 去管理这个状态。
{% endhint %}

### 方式二：逐级传递

* 多级嵌套组件通信：[demo](https://jsbin.com/yibazoh/6/edit?html,js,output)
* 兄弟组件通信：[demo](https://jsbin.com/fopikor/3/edit?html,js,output)

### 方式三：context

* 多级嵌套组件通信：[demo](https://jsbin.com/yibazoh/6/edit?html,js,output)
* 兄弟组件通信：原理同上demo

{% hint style="warning" %}
**注意**：React 官方并不建议大量使用 context，因为尽管它可以减少逐层传递，但当组件结构复杂的时候，我们并不知道 context 是从哪里传来的。context 就像一个全局变量，而全局变量正是导致应用走向混乱的罪魁祸首之一。
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://cosmos-x.gitbook.io/react-development-guides/2.-react-ji-chu/tong-xin.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.