React 组件之间的通信-EW帮帮网

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 组件通信分为以下几种场景：

父子组件通信
兄弟组件通信
跨级组件通信

父子组件通信

父组件向子组件传递数据，子组件通过 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 来实现跨级组件通信。

创建 Context
使用 Provider 将数据传递给 Context
使用 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 将数据在它们之间进行传递。

React 组件之间的通信