React 组件通信完整指南 以及 自定义事件发布订阅系统

React 组件通信完整指南

1. 父子组件通信

1.1 父组件向子组件传递数据

// 父组件
function ParentComponent() {const [data, setData] = useState('Hello from parent');return <ChildComponent message={data} />;
}// 子组件
function ChildComponent({ message }) {return <div>{message}</div>;
}

1.2 子组件向父组件传递数据

// 父组件
function ParentComponent() {const handleChildData = (data) => {console.log('Received from child:', data);};return <ChildComponent onDataSend={handleChildData} />;
}// 子组件
function ChildComponent({ onDataSend }) {const sendData = () => {onDataSend('Hello from child');};return <button onClick={sendData}>Send Data to Parent</button>;
}

1.3 父组件调用子组件方法

// 父组件
function ParentComponent() {const childRef = useRef();const handleClick = () => {childRef.current.childMethod();};return (<div><ChildComponent ref={childRef} /><button onClick={handleClick}>Call Child Method</button></div>);
}// 子组件
const ChildComponent = forwardRef((props, ref) => {useImperativeHandle(ref, () => ({childMethod: () => {console.log('Child method called');}}));return <div>Child Component</div>;
});

2. 兄弟组件通信

2.1 通过共同父组件

function ParentComponent() {const [sharedData, setSharedData] = useState('');return (<div><SiblingOne onDataChange={setSharedData} /><SiblingTwo data={sharedData} /></div>);
}function SiblingOne({ onDataChange }) {return (<button onClick={() => onDataChange('Hello from Sibling One')}>Send to Sibling</button>);
}function SiblingTwo({ data }) {return <div>Received: {data}</div>;
}

2.2 使用 Context

// 创建 Context
const DataContext = React.createContext();// 父组件提供 Context
function ParentComponent() {const [sharedData, setSharedData] = useState('');return (<DataContext.Provider value={{ data: sharedData, setData: setSharedData }}><SiblingOne /><SiblingTwo /></DataContext.Provider>);
}// 兄弟组件一
function SiblingOne() {const { setData } = useContext(DataContext);return (<button onClick={() => setData('Hello from Context')}>Update Context</button>);
}// 兄弟组件二
function SiblingTwo() {const { data } = useContext(DataContext);return <div>Context Data: {data}</div>;
}

3. 消息订阅与发布

3.1 使用 PubSubJS

PubSubJS 是一个基于主题的发布/订阅库。

• 官方文档: https://github.com/mroderick/PubSubJS
• 安装: npm install pubsub-js
• 接受消息的组件订阅消息
• 提供数据的组件发布消息
• 可在兄弟组件，祖孙组件进行通讯

基本用法示例

import PubSub from 'pubsub-js';// 定义消息主题
const TOPICS = {USER_LOGGED_IN: 'USER_LOGGED_IN',DATA_UPDATED: 'DATA_UPDATED',NOTIFICATION: 'NOTIFICATION'
};// 登录组件（发布者）
function LoginComponent() {const handleLogin = () => {// 登录成功后发布消息PubSub.publish(TOPICS.USER_LOGGED_IN, {userId: '123',username: 'john_doe',timestamp: new Date()});};return <button onClick={handleLogin}>Login</button>;
}// 头部组件（订阅者）
function HeaderComponent() {const [username, setUsername] = useState('');useEffect(() => {// 订阅登录消息const token = PubSub.subscribe(TOPICS.USER_LOGGED_IN, (topic, data) => {setUsername(data.username);console.log(`User ${data.username} logged in at ${data.timestamp}`);});return () => {// 组件卸载时取消订阅PubSub.unsubscribe(token);};}, []);return <div>Welcome, {username}</div>;
}// 通知组件（订阅者）
function NotificationComponent() {const [notifications, setNotifications] = useState([]);useEffect(() => {// 可以同时订阅多个主题const tokens = [PubSub.subscribe(TOPICS.USER_LOGGED_IN, (topic, data) => {setNotifications(prev => [...prev, `New login: ${data.username}`]);}),PubSub.subscribe(TOPICS.DATA_UPDATED, (topic, data) => {setNotifications(prev => [...prev, `Data updated: ${data.message}`]);})];return () => {// 清理所有订阅tokens.forEach(token => PubSub.unsubscribe(token));};}, []);return (<div><h3>Notifications</h3><ul>{notifications.map((note, index) => (<li key={index}>{note}</li>))}</ul></div>);
}

3.2 自定义事件发布订阅系统

// eventBus.js
class EventBus {constructor() {this.events = {};}subscribe(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);};}publish(event, data) {if (this.events[event]) {this.events[event].forEach(callback => callback(data));}}
}export default new EventBus();

3.2.1. EventBus 类

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

EventBus 是一个类，里面有一个 events 对象，用来存储所有事件及其对应的回调函数。
this.events 以事件名为键 (key)，回调函数数组为值 (value)，用来存储订阅的事件和回调函数。

3.2.2. subscribe 方法

subscribe(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);};
}

subscribe 方法用于订阅某个事件 (event) 并提供一个回调函数 (callback)。
如果事件名 event 不存在于 this.events 中，会初始化为一个空数组。
然后把回调函数添加到事件对应的回调函数数组中。
subscribe 方法返回一个取消订阅的函数。这是通过在返回值中使用 filter 方法，从 this.events[event] 数组中移除给定的回调函数来实现的。
订阅示例：

const unsubscribe = eventBus.subscribe('someEvent', (data) => {console.log(data);
});

这样，当 ‘someEvent’ 事件发生时，回调会执行。
调用 unsubscribe() 可以取消订阅该事件的回调。

3.2.3. publish 方法

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

publish 方法用于触发某个事件 (event)，并向订阅该事件的回调函数传递数据 (data)。
如果事件在 this.events 中存在，它会依次执行所有与该事件相关的回调函数，并把 data 作为参数传递给回调函数。
发布事件示例：

eventBus.publish('someEvent', { key: 'value' });

这会触发所有订阅 ‘someEvent’ 的回调，并将 { key: ‘value’ } 传递给它们。

3.2.4. 实例化 EventBus

export default new EventBus();

这一行创建了一个 EventBus 的实例，并将其导出。这样其他模块就可以直接使用这个实例来订阅和发布事件，而无需每次都创建新的 EventBus 实例。

3.2.5 总结

订阅事件：通过 subscribe 方法，可以为某个事件注册一个回调函数。
发布事件：通过 publish 方法，可以触发某个事件，并将数据传递给所有已订阅该事件的回调函数。
取消订阅：subscribe 返回的函数可以用来取消订阅某个事件。

// 使用自定义事件系统
import eventBus from './eventBus';// 发布者组件
function Publisher() {const publishEvent = () => {eventBus.publish('customEvent', {message: 'Hello from custom event'});};return <button onClick={publishEvent}>Publish Event</button>;
}// 订阅者组件
function Subscriber() {const [message, setMessage] = useState('');useEffect(() => {const unsubscribe = eventBus.subscribe('customEvent', (data) => {setMessage(data.message);});return () => unsubscribe();}, []);return <div>Custom Event Message: {message}</div>;
}

3.3 使用 RxJS

// 安装: npm install rxjsimport { Subject } from 'rxjs';const messageSubject = new Subject();// 发布者组件
function RxPublisher() {const publishMessage = () => {messageSubject.next({text: 'Hello from RxJS',timestamp: new Date()});};return <button onClick={publishMessage}>Publish RxJS Message</button>;
}// 订阅者组件
function RxSubscriber() {const [message, setMessage] = useState('');useEffect(() => {const subscription = messageSubject.subscribe(data => {setMessage(data.text);});return () => subscription.unsubscribe();}, []);return <div>RxJS Message: {message}</div>;
}

4. 最佳实践

4.1 选择合适的通信方式

1. 父子组件通信：

   • 优先使用 props 和回调函数
   • 需要调用子组件方法时使用 ref

2. 兄弟组件通信：

   • 简单场景：通过共同父组件
   • 复杂场景：使用 Context 或状态管理库

3. 跨层级组件通信：

   • 使用 Context
   • 使用消息订阅发布
   • 考虑使用状态管理库（Redux/MobX）

4.2 性能优化

// 使用 useMemo 优化 props
function ParentComponent() {const [count, setCount] = useState(0);const expensiveData = useMemo(() => {return computeExpensiveValue(count);}, [count]);return <ChildComponent data={expensiveData} />;
}// 使用 useCallback 优化回调函数
function ParentComponent() {const handleClick = useCallback((value) => {console.log(value);}, []);return <ChildComponent onClick={handleClick} />;
}

4.3 注意事项

1. 清理订阅

useEffect(() => {const subscription = someEventSource.subscribe();return () => subscription.unsubscribe();
}, []);

2. 避免过度使用全局状态

// 不推荐
const GlobalContext = React.createContext();// 推荐：将 Context 拆分为更小的粒度
const UserContext = React.createContext();
const ThemeContext = React.createContext();

3. 合理使用 memo

const MemoizedChild = React.memo(ChildComponent, (prevProps, nextProps) => {return prevProps.value === nextProps.value;
});

5. 总结

组件通信方式选择建议：

1. 就近原则：

   • 父子组件优先使用 props
   • 兄弟组件优先通过父组件通信

2. 灵活性考虑：

   • 简单场景使用 props 和回调
   • 复杂场景考虑发布订阅或状态管理

3. 性能考虑：

   • 合理使用 useMemo 和 useCallback
   • 适当使用 React.memo
   • 注意清理订阅避免内存泄漏

4. 维护性考虑：

   • 保持通信逻辑清晰
   • 避免过度使用全局状态
   • 合理划分组件职责

实际应用场景

1. 跨组件通信:

// 数据更新组件（发布者）
function DataUpdateComponent() {const updateData = () => {// 执行数据更新操作PubSub.publish(TOPICS.DATA_UPDATED, {message: 'Data has been updated',timestamp: new Date()});};return <button onClick={updateData}>Update Data</button>;
}// 多个需要响应数据更新的组件（订阅者）
function TableComponent() {const [data, setData] = useState([]);useEffect(() => {const token = PubSub.subscribe(TOPICS.DATA_UPDATED, () => {// 重新获取数据fetchData().then(setData);});return () => PubSub.unsubscribe(token);}, []);return <table>{/* 渲染数据 */}</table>;
}function ChartComponent() {const [chartData, setChartData] = useState(null);useEffect(() => {const token = PubSub.subscribe(TOPICS.DATA_UPDATED, () => {// 更新图表数据updateChartData();});return () => PubSub.unsubscribe(token);}, []);return <div>{/* 渲染图表 */}</div>;
}

2. 全局状态变化通知:

// 主题切换组件（发布者）
function ThemeToggle() {const toggleTheme = () => {const newTheme = 'dark';PubSub.publish('THEME_CHANGED', { theme: newTheme });};return <button onClick={toggleTheme}>Toggle Theme</button>;
}// 需要响应主题变化的组件（订阅者）
function ThemedComponent() {const [theme, setTheme] = useState('light');useEffect(() => {const token = PubSub.subscribe('THEME_CHANGED', (_, data) => {setTheme(data.theme);// 更新组件样式});return () => PubSub.unsubscribe(token);}, []);return <div className={theme}>{/* 组件内容 */}</div>;
}

3.2 使用注意事项

1. 命名约定:

// 使用常量定义主题名称
const TOPICS = {USER_ACTION: 'USER_ACTION',SYSTEM_EVENT: 'SYSTEM_EVENT',DATA_CHANGE: 'DATA_CHANGE'
};// 使用命名空间避免冲突
const TOPICS = {USER: {LOGIN: 'USER.LOGIN',LOGOUT: 'USER.LOGOUT'},DATA: {UPDATE: 'DATA.UPDATE',DELETE: 'DATA.DELETE'}
};

2. 性能考虑:

function OptimizedComponent() {useEffect(() => {// 使用防抖或节流处理高频事件const handleDataChange = debounce((topic, data) => {// 处理数据变化}, 200);const token = PubSub.subscribe('DATA_CHANGE', handleDataChange);return () => PubSub.unsubscribe(token);}, []);
}

3. 错误处理:

function RobustSubscriber() {useEffect(() => {const token = PubSub.subscribe('TOPIC', (topic, data) => {try {// 处理数据} catch (error) {console.error('Error handling published data:', error);// 错误处理逻辑}});return () => PubSub.unsubscribe(token);}, []);
}