前端 ｜ React 组件通信 超详细 实现组件通信: 父子、子父及兄弟组件间的通信

背景：

在构建用户界面时，React 通过其组件化架构提供了一种高效的方式来组织代码。每个组件负责管理自己的状态和渲染逻辑，但随着应用的复杂性增加，组件之间需要共享数据和状态，或者需要触发彼此的操作。这就是组件通信发挥作用的地方。

为什么要实现组件通信？

1.  数据共享：在多层嵌套的组件树中，有些数据需要在多个组件间共享
2.  状态提升：在多层嵌套的组件结构中，如果深层组件需要修改上层组件的状态，这可能需要通过所谓的“状态提升”来实现，即将状态提升到它们共同的最近祖先组件中。
3.  父子组件交互： 父组件可能需要获取子组件的数据或触发子组件的行为，反之亦然
4.  兄弟组件通信：在某些情况下，两个兄弟组件（即共享同一父组件的组件）需要相互通信，但它们之间没有直接的父子关系
5.  结耦组件：通过组件通信，可以减少组件间的直接依赖，使得组件更加独立和可复用
6.  响应式更新：组件通信机制允许组件响应其他组件的状态变化，并根据需要更新自己的状态或UI
7. 模式和最佳实践： 理解组件通信的模式和最佳实践可以帮助开发者编写更清晰、更可维护的代码

一、父子组件通讯（props）

父组件可以通过 ‘props’ 向子组件传递数据和函数。子组件可以通过调用传递的函数来与父组件通讯

父组件向子组件传递数据：

父传子：
1. 父组件传递数据，子组件标签身上绑定属性
2. 子组件接收数据 props 的参数
// PraentComponent.js

import React from &