如何在不破坏模块化的前提下在兄弟组件中访问React组件内部state？

方案结论 #

存在完全符合要求的实现方案，基于发布/订阅（观察者）模式即可实现，不需要违反任何限制条件，也不会破坏代码模块化。

具体实现步骤 #

1. 封装独立的事件总线模块 #

首先创建一个无任何React依赖的纯JS事件总线模块，仅负责事件的订阅、取消订阅和发布逻辑，不存储任何业务状态：

// eventBus.js
const eventBus = {
  events: Object.create(null),
  // 订阅事件
  on(eventName, callback) {
    if (!this.events[eventName]) {
      this.events[eventName] = [];
    }
    this.events[eventName].push(callback);
  },
  // 取消订阅
  off(eventName, callback) {
    if (!this.events[eventName]) return;
    this.events[eventName] = this.events[eventName].filter(cb => cb !== callback);
  },
  // 发布事件
  emit(eventName, ...payload) {
    if (!this.events[eventName]) return;
    this.events[eventName].forEach(cb => cb(...payload));
  }
};

export default eventBus;

2. 原组件内部状态变化时发布通知 #

SomeComponent 完全保留内部状态的定义和管理逻辑，只需要在状态变化时对外发布事件通知即可：

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

function SomeComponent(props) {
  const [x, setX] = useState([]);
  const [y, setY] = useState([]);

  // 状态变更时推送最新值
  useEffect(() => {
    eventBus.emit('SomeComponent:stateUpdate', { x, y });
  }, [x, y]);

  return <></>
}

export default SomeComponent;

3. 兄弟组件订阅事件获取状态 #

无层级关联的兄弟组件只需要订阅对应的事件，即可实时拿到最新的x、y值，不需要和原组件有任何直接关联：

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

function SiblingComponent(props) {
  const [remoteState, setRemoteState] = useState({ x: [], y: [] });

  useEffect(() => {
    const handleStateUpdate = (newState) => {
      setRemoteState(newState);
    };
    // 注册订阅
    eventBus.on('SomeComponent:stateUpdate', handleStateUpdate);
    // 卸载时取消订阅，避免内存泄漏
    return () => eventBus.off('SomeComponent:stateUpdate', handleStateUpdate);
  }, []);

  // 后续直接使用 remoteState.x、remoteState.y 即可
  return <div>{/* 业务逻辑 */}</div>
}

export default SiblingComponent;

合规性说明 #

完全满足所有限制条件：

• 无全局状态：x、y始终是SomeComponent的内部状态，事件总线仅做消息转发，不存储任何业务状态，没有全局可修改的状态变量。
• 未使用Context：全流程没有用到任何React Context相关API，和React的内置状态传递机制完全解耦。
• 未迁移状态、未传递set方法：状态始终在原组件内部管理，也没有通过props向任何外部组件传递setX、setY方法。

模块化说明 #

该方案不会破坏代码模块化：

• 两个业务组件之间没有直接依赖，仅共同依赖独立的事件总线通用模块，符合依赖倒置原则。
• 原组件的封装性没有被破坏，外部组件无法直接修改原组件的内部状态，只能被动接收状态更新通知，原组件可以随时调整对外暴露的字段，甚至关闭状态通知，都不会影响自身的功能逻辑。
• 事件总线是通用模块，可以在任意业务场景下复用，和具体业务逻辑完全解耦。

内容的提问来源于stack exchange，提问作者siventer