9.3 兄弟组件与无关联组件通信

在 React 组件树中，兄弟组件是指拥有相同父组件的两个或多个组件。由于 React 严格遵循单向数据流——数据只能从父组件流向子组件，子组件不能直接修改兄弟组件的状态。因此，兄弟组件之间的通信需要借助一些间接手段。最核心的两种方案就是状态提升和发布订阅模式。

9.3.1 状态提升：让父组件成为数据中枢

状态提升是 React 官方推荐的兄弟通信方式。核心思想是：将共享的状态“提升”到离两个兄弟组件最近的共同祖先组件中，由父组件持有状态，再通过 Props 向下分发给两个兄弟组件。当其中一个兄弟组件需要改变这个状态时，它调用父组件通过 Props 传递下来的回调函数，由父组件统一修改状态，从而实现兄弟间的间接通信。

实现步骤

识别出两个兄弟组件都需要访问的共享状态。
在它们的共同父组件中声明该状态。
将状态值和修改该状态的函数分别作为 Props 传递给两个兄弟组件。
兄弟组件通过调用传入的函数来触发状态变化，变化后父组件重新渲染，另一个兄弟组件自动获得更新后的值。

完整示例：商品筛选器与商品列表

假设我们有一个商品页面，左侧 FilterPanel 负责选择分类，右侧 ProductList 根据分类展示商品。这两个组件是兄弟关系。

// 父组件
function ProductPage() {
  const [category, setCategory] = useState('all');

  return (
    <div className="product-page">
      <FilterPanel selected={category} onCategoryChange={setCategory} />
      <ProductList category={category} />
    </div>
  );
}

// 兄弟组件 A：筛选面板
function FilterPanel({ selected, onCategoryChange }) {
  const categories = [
    { value: 'all', label: '全部' },
    { value: 'electronics', label: '电子产品' },
    { value: 'books', label: '图书' },
  ];

  return (
    <div className="filter-panel">
      {categories.map(cat => (
        <button
          key={cat.value}
          disabled={selected === cat.value}
          onClick={() => onCategoryChange(cat.value)}
        >
          {cat.label}
        </button>
      ))}
    </div>
  );
}

// 兄弟组件 B：商品列表
function ProductList({ category }) {
  const products = useProducts(category); // 自定义 Hook 获取数据

  return (
    <ul>
      {products.map(p => (
        <li key={p.id}>{p.name}</li>
      ))}
    </ul>
  );
}

状态提升的优缺点

优点：

数据流清晰、可预测：所有状态变更都集中在父组件，方便调试和维护。
符合 React 单向数据流的设计哲学。
组件解耦：兄弟组件之间完全不知道彼此存在，只依赖 Props 接口。

缺点：

当组件层级较深时，状态可能需要逐层向上提升、再向下传递，导致“Props 层层传递”问题（Props Drilling）。
对于非常复杂或跨多层级的共享状态，纯粹靠状态提升会使父组件变得臃肿。

适用场景：兄弟组件拥有共同且直接的父组件，且状态变更逻辑不算过于复杂时，应优先使用状态提升。

9.3.2 发布订阅模式：解耦的兄弟通信

发布订阅模式（Pub/Sub）是一种广义的事件通信机制，不依赖 React 组件树结构。它使用一个中央事件总线（Event Bus），兄弟组件通过订阅（监听）和发布（触发）自定义事件来实现通信，完全不需要经过父组件。

在 React 中，通常可以借助一个简易的 EventEmitter 类或使用浏览器的 CustomEvent，也可以使用现成的微型库（如 mitt、eventemitter3）。

实现简易事件总线

// eventBus.js
class EventBus {
  constructor() {
    this.events = {};
  }

  on(event, callback) {
    if (!this.events[event]) {
      this.events[event] = [];
    }
    this.events[event].push(callback);
    // 返回取消订阅函数
    return () => {
      this.events[event] = this.events[event].filter(cb => cb !== callback);
    };
  }

  emit(event, data) {
    if (this.events[event]) {
      this.events[event].forEach(callback => callback(data));
    }
  }
}

export const eventBus = new EventBus();

在兄弟组件中使用

// 父组件（仅提供容器，不再管理通信状态）
function App() {
  return (
    <div>
      <Player />
      <Playlist />
    </div>
  );
}

// 兄弟组件 A：播放器，订阅歌曲切换事件
function Player() {
  const [currentSong, setCurrentSong] = useState(null);

  useEffect(() => {
    // 订阅 'songChange' 事件
    const unsubscribe = eventBus.on('songChange', (song) => {
      setCurrentSong(song);
    });
    return unsubscribe; // 组件卸载时自动取消订阅，防止内存泄漏
  }, []);

  return (
    <div>
      正在播放：{currentSong ? currentSong.name : '--'}
    </div>
  );
}

// 兄弟组件 B：歌单，点击歌曲时发布事件
function Playlist() {
  const songs = [
    { id: 1, name: '晴天' },
    { id: 2, name: '稻香' },
  ];

  const play = (song) => {
    eventBus.emit('songChange', song);
  };

  return (
    <ul>
      {songs.map(song => (
        <li key={song.id} onClick={() => play(song)}>
          {song.name}
        </li>
      ))}
    </ul>
  );
}

发布订阅模式的优缺点

优点：

完全解耦：兄弟组件之间、甚至与父组件之间都没有直接依赖。
适合跨层级、非父子关系的复杂通信场景。
可以将通信逻辑抽离成独立模块，便于扩展。

缺点：

数据流隐式、难以追踪：事件触发和接收散落在不同地方，调试时不容易看清完整的数据流路径。
容易引发内存泄漏：如果组件销毁时忘记取消订阅，旧组件仍会响应事件并尝试更新（React DevTools 会警告，但不会报错）。
增加代码复杂度：对于简单的兄弟通信，引入事件总线有过度设计之嫌。

适用场景：当兄弟组件没有共同的直接父组件，或者状态提升会导致严重的 Props Drilling，且通信关系不是简单的父-子-兄链时，发布订阅模式是一种有效的补充方案。

9.3.3 方案选择建议

在真实的 React 开发中，优先级如下：

能用状态提升就先用状态提升。它最简单、最直观，完美契合 React 的数据流模型，组件结构清晰。
当状态提升导致 Props 传递层级过深（超过 2-3 层毫无意义的转发）时，考虑引入 Context 来跨层级传递，而不是直接跳到发布订阅。
当通信关系非常分散、动态，或需要在完全独立的组件树之间传递事件时（如全局通知、全局播放器控制），才使用发布订阅模式作为辅助手段。

始终记得：React 的核心是单向数据流，尽可能保持数据流动的可见性和可预测性，这是长期项目健康的关键。