React非父子组件间数据传递与事件触发方法咨询

Hey SrinivasaRao.CH, 作为React新手，跨组件通信确实是个容易懵的点——毕竟React和Angular的思路不太一样，不过别担心，我给你整理几个实用的方案，既能实现类似Angular 1.x里$broadcast/$emit的事件触发，也能解决组件间的数据传递问题~

Context是React官方提供的跨组件通信方案，不管组件有没有父子关系，只要在同一个Context的Provider范围内，就能轻松实现事件触发和数据传递，非常适合替代Angular的事件广播机制。

实现步骤： #

1. 创建一个事件管理的Context，封装监听、触发、移除监听的方法
2. 用Provider包裹需要通信的组件树
3. 在目标组件中通过钩子使用Context的方法

代码示例：

// EventContext.js
import { createContext, useContext, useCallback, useState } from 'react';

// 创建Context
const EventContext = createContext();

export const EventProvider = ({ children }) => {
  // 存储事件监听器
  const [listeners, setListeners] = useState({});

  // 监听事件
  const on = useCallback((eventName, handler) => {
    setListeners(prev => ({
      ...prev,
      [eventName]: [...(prev[eventName] || []), handler]
    }));
  }, []);

  // 触发事件，可携带数据
  const emit = useCallback((eventName, data) => {
    (listeners[eventName] || []).forEach(handler => handler(data));
  }, [listeners]);

  // 移除监听，防止内存泄漏
  const off = useCallback((eventName, handler) => {
    setListeners(prev => ({
      ...prev,
      [eventName]: prev[eventName]?.filter(h => h !== handler) || []
    }));
  }, []);

  return (
    <EventContext.Provider value={{ on, emit, off }}>
      {children}
    </EventContext.Provider>
  );
};

// 自定义钩子简化使用
export const useEvent = () => useContext(EventContext);

组件中使用：

组件A（触发事件）

import { useEvent } from './EventContext';

function ComponentA() {
  const { emit } = useEvent();

  const handleTrigger = () => {
    // 触发事件并传递数据
    emit('userUpdated', { id: 123, name: 'Srinivasa' });
  };

  return <button onClick={handleTrigger}>更新用户信息</button>;
}

组件B（监听事件）

import { useEvent, useEffect } from './EventContext';

function ComponentB() {
  const { on, off } = useEvent();

  useEffect(() => {
    const handleUserUpdate = (userData) => {
      console.log('收到用户更新数据:', userData);
      // 这里可以执行组件的更新逻辑
    };

    // 监听事件
    on('userUpdated', handleUserUpdate);

    // 组件卸载时移除监听
    return () => off('userUpdated', handleUserUpdate);
  }, [on, off]);

  return <div>我是组件B，等待接收事件通知...</div>;
}

根组件包裹Provider

import { EventProvider } from './EventContext';
import ComponentA from './ComponentA';
import ComponentB from './ComponentB';

function App() {
  return (
    <EventProvider>
      <ComponentA />
      <ComponentB />
    </EventProvider>
  );
}

这个方案最接近Angular的$broadcast/$emit思路，用原生JS实现一个简单的事件总线，组件间通过它来发送和接收事件，适合小型项目或简单的通信场景。

代码示例：

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

  // 绑定事件监听
  on(eventName, handler) {
    if (!this.listeners[eventName]) {
      this.listeners[eventName] = [];
    }
    this.listeners[eventName].push(handler);
  }

  // 触发事件，传递数据
  emit(eventName, data) {
    if (this.listeners[eventName]) {
      this.listeners[eventName].forEach(handler => handler(data));
    }
  }

  // 移除事件监听
  off(eventName, handler) {
    if (this.listeners[eventName]) {
      this.listeners[eventName] = this.listeners[eventName].filter(h => h !== handler);
    }
  }
}

// 导出单例实例
export default new EventBus();

组件中使用：

组件A（发送事件）

import eventBus from './eventBus';

function ComponentA() {
  const sendMessage = () => {
    eventBus.emit('messageSent', { text: 'Hello from Component A!' });
  };

  return <button onClick={sendMessage}>发送消息</button>;
}

组件B（接收事件）

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

function ComponentB() {
  useEffect(() => {
    const handleMessage = (data) => {
      alert(`收到消息: ${data.text}`);
    };

    // 绑定监听
    eventBus.on('messageSent', handleMessage);

    // 组件卸载时解绑
    return () => eventBus.off('messageSent', handleMessage);
  }, []);

  return <div>组件B</div>;
}

如果你的项目比较复杂，有很多跨组件的状态共享和事件触发需求，推荐用状态管理库（比如Redux、Zustand、Jotai）。这类库把共享状态放在全局，组件通过修改状态来“触发事件”，其他组件订阅状态变化来获取数据，从根本上解决跨组件通信问题。

用Zustand的示例（轻量易用）：

// store.js
import { create } from 'zustand';

// 创建全局状态 store
const useUserStore = create((set) => ({
  user: null,
  // 修改状态的方法（相当于触发事件）
  updateUser: (userData) => set({ user: userData }),
}));

export default useUserStore;

组件A（更新状态）

import useUserStore from './store';

function ComponentA() {
  const updateUser = useUserStore(state => state.updateUser);

  const handleUpdate = () => {
    updateUser({ id: 123, name: 'Srinivasa' });
  };

  return <button onClick={handleUpdate}>更新用户</button>;
}

组件B（订阅状态变化）

import useUserStore from './store';

function ComponentB() {
  // 订阅user状态，状态变化时自动更新组件
  const user = useUserStore(state => state.user);

  return (
    <div>
      {user ? (
        <p>当前用户：{user.name}</p>
      ) : (
        <p>暂无用户信息</p>
      )}
    </div>
  );
}

• 小型项目/简单通信：优先用自定义Event Bus或Context API
• 中大型项目/复杂状态管理：推荐用状态管理库（Zustand上手成本低，Redux生态更完善）

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