React 组件之间的通信

React 组件通信

对于 React 组件之间的通信，我们首先了解一下 React 组件通信的设计理念。

单向数据流（Unidirectional Data Flow）

数据流向明确： 在 React 中，数据总是从父组件流向子组件（通过 Props 传递），而子组件则通过调用父组件传入的回调函数来“反馈”数据。这种单向数据流使得数据依赖关系清晰，便于理解和调试。

降低复杂度： 单向数据流让状态管理更集中，当应用变得复杂时，可以通过“状态提升”（Lifting State Up）将共享状态上移到最近的公共祖先组件，从而统一管理。

组合优于继承（Composition Over Inheritance）

组件组合： React 倡导通过组件组合来构建复杂 UI，而不是依赖继承。每个组件封装自身逻辑，通过 Props 进行数据传递和行为控制。这样不仅增强了复用性，也提高了组件间的独立性。

显式通信： 通过明确的 Props 传递和回调函数，组件之间的依赖关系显式展现，而不是通过隐式的全局事件或信号进行耦合。

函数式编程理念

纯函数组件： React 鼓励将组件设计为纯函数——即根据输入（Props 和 State）返回对应的 UI。这样可以使组件行为更加可预测，减少副作用，从而提升整体的可维护性。

不可变性： 数据不直接在组件内部修改，而是通过创建新数据来更新状态，这有助于实现高效的虚拟 DOM Diff 算法。

明确的责任分离

父组件管理状态： 父组件负责管理数据状态，并将状态和行为（回调函数）通过 Props 传递给子组件。子组件只负责展示和局部交互，不直接管理状态，确保数据的“单一来源”（Single Source of Truth）。

组件边界清晰： 这种设计使得每个组件都有明确的责任，父组件掌控数据流，子组件则专注于 UI 展示和局部交互。

易于调试与维护

数据流可追踪： 由于所有数据变化都是通过显式的 Props 和回调传递的，开发者可以轻松追踪数据从哪个组件流向另一个组件，这在大型应用中尤为重要。

工具支持： React 的调试工具（如 React DevTools）可以直观展示组件树、Props 和 State，使得问题定位更迅速。

React 通过单向数据流、组件组合、明确的责任分离以及函数式编程的理念，设计出了一种既简洁又高效的组件通信方式。这种设计不仅提升了代码的可维护性和调试性，也与 React 的虚拟 DOM 渲染机制和整体架构高度契合。

React 组件通信方式

根据组件之间的嵌套和层级关系，我们可以将 React 组件通信分为以下几种场景：

1. 父子组件通信
2. 兄弟组件通信
3. 跨级组件通信

父子组件通信

父组件向子组件传递数据，子组件通过 Props 接收。例如：

function Son(props) {return (<div><p>数值：{props.age}</p><p>字符串：{props.name}</p><p>数组：{props.arr}</p><p>对象：name: {props.obj.name}, age: {props.obj.age}</p><p>布尔值：{props.bool}</p><p>函数：{props.fn()}</p></div>)
}function App() {const age = 18;   // 数值const name = '小明';  // 字符串 const arr = [1,2,3,4,5]; // 数组const obj = {name:'小明', age:18}; // 对象const bool = true;  // 布尔值// 函数const fn = function(){return '我是函数';} return (<div className="App"><Son age={age} name={name} arr={arr} bool={bool} fn={fn} obj={obj}> </Son></div>)
}export default App;

父组件通过属性将数据传递给子组件，子组件通过 props 接收。props 是一个约定成俗的使用方式，它是一个对象，包含了父组件传递给子组件的所有属性。

那么如何将子组件的数据传递给父组件呢？答案是子组件通过调用父组件传入的回调函数来“反馈”数据。例如：

import { useState } from 'react';function Son(props) {return (<div><button onClick={() => props.fn(props.age)}>点击</button></div>)
}
function App() {const [age, setAge] = useState(18);const fn = (age) => {setAge(age + 1);}return (<div className="App"><p>{age}</p><Son age={age} fn={fn}></Son></div>)
}
export default App;

在父组件中，将 age 设置为 state，通过 setAge 来更新 age 的值。在子组件中，我们通过 onClick 事件调用父组件传入的 fn 回调函数，并将 age 作为参数传递给 fn。这样，子组件的数据就可以通过 fn 回调函数传递给父组件。

特殊的 prop children

在 React 中，有一个特殊的 prop，即 children。children 是一个特殊的 prop，它表示组件的子节点。在组件中，我们可以通过 children 来获取子节点，并通过子节点来渲染内容。例如：

function App() {return (<div className="App"><Son><p>我是子节点</p></Son></div>)
}function Son(props) {return (<div>{/* 子节点 */}{props.children}    <p>我是子组件</p></div>)
}export default App;

在 App 组件中，我们通过 Son 组件的子节点来渲染内容。在 Son 组件中，通过 props.children 来获取子节点，并通过子节点来渲染内容。这样，子组件就可以通过 props.children 来获取子节点，并通过子节点来渲染内容。

兄弟组件通信

在 React 中，兄弟组件可以通过父组件来通信。例如：有一个名为 APP 的父组件，它有两个子组件 A 和 B，我们现在需要 A 和 B 组件之间进行通信，那么我们将父组件 APP 作为中转站来分发数据。这正体现了 React 组件通信设计理念中的明确的责任分离，父组件管理数据状态，子组件只负责展示和局部交互。

下面是一个例子：

import { useState } from 'react';
function SonA(props) {return (<div><p>数值1：{props.age}</p><button onClick={() => props.fn(props.age)}>点击1</button></div>)
}
function SonB(props) {return (<div><p>数值2：{props.age}</p><button onClick={() => props.fn2(props.age)}>点击2</button></div>)
}
function App() {const [age, setAge] = useState(18);const fn = (age) => {setAge(age + 1);console.log('A');}const fn2 = (age) => {setAge(age - 1);console.log('B');}return (<div className="App"><SonA age={age} fn={fn} ></SonA><SonB age={age} fn2={fn2}></SonB></div>)
}
export default App;

在 App 组件中，我们定义了两个子组件 SonA 和 SonB，它们都通过 props 接收父组件的 age 值，并通过 props.fn 和 props.fn2 来调用父组件的 fn 和 fn2 回调函数。这样，A 和 B 组件就可以通过调用父组件的 fn 和 fn2 回调函数来通信。

跨级组件通信

跨级组件通信，即指组件之间不在父子关系中，而是位于不同层级的组件之间进行通信。在 React 中，我们可以通过使用 Context API 来实现跨级组件通信。

1. 创建 Context
2. 使用 Provider 将数据传递给 Context
3. 使用 Consumer 获取 Context 中的数据

下面是一个跨级组件通信的例子：

import React, { createContext, useContext, useState } from 'react';
const MyContext = createContext();
function Son() {const { age, setAge } = useContext(MyContext);return (<div><p>数值1：{age}</p><button onClick={() => setAge(age + 1)}>点击1</button><GrandSon></GrandSon></div>)
}
function GrandSon() {const { age, setAge } = useContext(MyContext);return (<div><p>数值2：{age}</p><button onClick={() => setAge(age - 1)}>点击2</button></div>)
}
function App() {const [age, setAge] = useState(18);return (<MyContext.Provider value={{age, setAge}}><div className="App"><Son></Son></div></MyContext.Provider>)
}
export default App;

在 App 组件中，我们创建了一个 MyContext，并通过 Provider 将 age 和 setAge 作为 value 传递给 MyContext。然后，在 Son 和 GrandSon 组件中，通过 useContext(MyContext) 来获取 MyContext 中的 age 和 setAge。

注意到 APP 和 Son 之间是父子组件关系，但是也可以以通过 Provider 将数据传递给 Son。实际上，对于 React 中所有的组件，都可以通过 Context API 将数据在它们之间进行传递。