React 组件通信全攻略：父子、兄弟、跨层级与非父子关系通信详解

在 React 应用的开发过程中，组件通信是构建复杂用户界面和交互逻辑的关键环节。有效的组件通信能够确保数据在不同组件之间准确传递与共享，从而实现应用功能的完整性与流畅性。本文将深入探讨 React 组件通信的多种方式及其适用场景，帮助开发者更好地掌握这一核心概念。

一、父子组件通信

（一）父组件向子组件传递数据

在 React 中，父组件向子组件传递数据是最常见的通信方式之一。通过在父组件中定义属性（props），并将其传递给子组件，子组件便可以接收并使用这些数据。

例如，我们有一个父组件 ParentComponent 和一个子组件 ChildComponent。在父组件中：

import React from'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const message = "这是来自父组件的消息";
  return (
    <div>
      <ChildComponent data={message} />
    </div>
  );
};

export default ParentComponent;

在子组件中，通过 props 接收数据：

import React from'react';

const ChildComponent = (props) => {
  return (
    <div>
      <p>{props.data}</p>
    </div>
  );
};

export default ChildComponent;

这样，父组件中的 message 数据就成功传递到了子组件，并在子组件中进行了展示。

（二）子组件向父组件传递数据（回调函数）

当子组件需要向父组件传递数据时，通常会使用回调函数的方式。父组件将一个回调函数作为属性传递给子组件，子组件在特定事件发生时调用该回调函数，并将数据作为参数传递给父组件。

例如，子组件中有一个按钮，点击按钮时需要将按钮的文本传递给父组件。在父组件中：

import React from'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const handleChildData = (childData) => {
    console.log(`收到子组件数据: ${childData}`);
  };
  return (
    <div>
      <ChildComponent onButtonClick={handleChildData} />
    </div>
  );
};

export default ParentComponent;

在子组件中：

import React from'react';

const ChildComponent = (props) => {
  const buttonText = "点击我";
  const handleClick = () => {
    props.onButtonClick(buttonText);
  };
  return (
    <div>
      <button onClick={handleClick}>{buttonText}</button>
    </div>
  );
};

export default ChildComponent;

当子组件中的按钮被点击时，handleClick 函数被调用，进而调用父组件传递过来的 onButtonClick 回调函数，并将按钮文本传递给父组件，父组件在控制台打印出接收到的数据。

二、兄弟组件通信

当两个兄弟组件需要进行通信时，由于它们在组件层级上是平级关系，无法直接进行数据传递。通常会借助它们共同的父组件来实现通信。

例如，有两个兄弟组件 BrotherComponentA 和 BrotherComponentB，它们都在 ParentComponent 下。如果 BrotherComponentA 中的某个操作需要通知 BrotherComponentB，可以在父组件中定义一个状态和相应的更新函数，然后将更新函数分别传递给两个兄弟组件。

在父组件中：

import React, { useState } from'react';
import BrotherComponentA from './BrotherComponentA';
import BrotherComponentB from './BrotherComponentB';

const ParentComponent = () => {
  const [sharedData, setSharedData] = useState('初始数据');

  const updateSharedData = (newData) => {
    setSharedData(newData);
  };

  return (
    <div>
      <BrotherComponentA updateData={updateSharedData} />
      <BrotherComponentB sharedData={sharedData} />
    </div>
  );
};

export default ParentComponent;

在 BrotherComponentA 中，当某个事件发生时调用 updateData 函数来更新共享数据：

import React from'react';

const BrotherComponentA = (props) => {
  const handleClick = () => {
    const newData = "来自组件 A 的新数据";
    props.updateData(newData);
  };
  return (
    <div>
      <button onClick={handleClick}>更新数据</button>
    </div>
  );
};

export default BrotherComponentA;

在 BrotherComponentB 中，接收并使用共享数据：

import React from'react';

const BrotherComponentB = (props) => {
  return (
    <div>
      <p>{props.sharedData}</p>
    </div>
  );
};

export default BrotherComponentB;

这样，通过父组件的中转，实现了兄弟组件之间的间接通信。

三、跨层级组件通信

在 React 应用中，有时组件之间的层级关系较为复杂，可能存在多层嵌套。对于跨层级组件通信，React 提供了 Context API 来解决这一问题。

例如，有一个根组件 RootComponent，它包含了多层嵌套的子组件，其中最深层的子组件 DeepChildComponent 需要获取根组件中的某些数据。

首先，在根组件中创建一个 Context：

import React from'react';

const MyContext = React.createContext();

const RootComponent = () => {
  const sharedValue = "这是跨层级共享的数据";
  return (
    <MyContext.Provider value={sharedValue}>
      {/* 其他组件层级 */}
      <MiddleComponent />
    </MyContext.Provider>
  );
};

export { MyContext, RootComponent };

然后，在需要使用数据的 DeepChildComponent 中，通过 useContext 钩子函数获取 Context 中的数据：

import React, { useContext } from'react';
import { MyContext } from './RootComponent';

const DeepChildComponent = () => {
  const sharedData = useContext(MyContext);
  return (
    <div>
      <p>{sharedData}</p>
    </div>
  );
};

export default DeepChildComponent;

这样，无论组件嵌套层级有多深，都可以通过 Context API 方便地实现跨层级组件通信。

四、非父子关系组件通信（发布订阅模式）

对于一些非父子关系且较为松散的组件通信场景，可以使用发布订阅模式。在 React 中，可以借助第三方库如 mitt 来实现。

首先安装 mitt 库：npm install mitt。

例如，有组件 ComponentA 和 ComponentB，它们之间没有直接的父子或兄弟关系。在一个单独的事件总线文件 eventBus.js 中：

import mitt from'mitt';

const emitter = mitt();

export default emitter;

在 ComponentA 中，当某个事件发生时发布消息：

import React from'react';
import emitter from './eventBus';

const ComponentA = () => {
  const handleClick = () => {
    const data = "来自组件 A 的消息";
    emitter.emit('customEvent', data);
  };
  return (
    <div>
      <button onClick={handleClick}>触发事件</button>
    </div>
  );
};

export default ComponentA;

在 ComponentB 中，订阅该事件并接收数据：

import React, { useEffect } from'react';
import emitter from './eventBus';

const ComponentB = () => {
  useEffect(() => {
    const subscription = emitter.on('customEvent', (data) => {
      console.log(`收到组件 A 消息: ${data}`);
    });
    return () => {
      // 组件卸载时取消订阅
      subscription();
    };
  }, []);

  return (
    <div>
      <p>组件 B 等待接收消息</p>
    </div>
  );
};

export default ComponentB;

通过这种发布订阅模式，实现了非父子关系组件之间的灵活通信。

综上所述，React 提供了多种组件通信方式，开发者需要根据组件之间的关系和具体的应用场景选择合适的通信策略，以构建高效、可维护的 React 应用。在实际开发中，熟练掌握这些组件通信方式将大大提升开发效率和代码质量。