当前位置：首页 > news >正文

React第十一节组件之间通讯之发布订阅模式（自定义发布订阅器）

news 文章来源：https://blog.csdn.net/weixin_39593730/article/details/144245146 2025/5/6 1:39:47

组件之间通讯常用方案
1、通过props
2、通过context
3、通过发布订阅模式
4、通过Redux 后面会有专栏介绍

什么情况下使用发布订阅模式

a、当我们想要兄弟组件之间通讯，而共同的父组件中又用不到这些数据时候；
b、当多个毫无相关的组件之间想要进行数据的传递时候，我们可以使用这种模式，当然可以使用 Redux 进行状态管理
c、当我们使用的是通用型组件，组件中只有通用功能，而不用关注各个组件之间的业务代码逻辑时候；

什么是发布订阅模式？

发布订阅模式（也称观察者模式）是一种管理跨组件通讯的方案，特别是在不想直接依赖于特定组件的时候。这种模式允许一个对象（发布者）通知多个其他对象（订阅者），而不必知道这些对象是谁或他们在哪里。
这种方案有助于组件之间解耦，可以提高代码模块化和可维护性。

1、自定义发布订阅类

利用类自身的特性，写通用的订阅事件、发布事件、取消订阅事件

// myComPubsuh 文件import { Component } from "react";export default class MyComPubsuh extends Component {constructor(props) {super(props);this.events = {}}subscribe(event, callback) {// 添加订阅事件if (!this.events[event]) {this.events[event] = []}this.events[event].push(callback)}unsubscribe(event, callback) {// 卸载订阅事件if (this.events[event])  {this.events[event] = this.events[event].filter(cb => cb !== callback)}}pubilsh(event, data) {// 发布事件并执行订阅事件的回调函数if (this.events[event])  {this.events[event].forEach(callback => callback(data));}}
}export  const myPubsh = new MyComPubsuh()

2、子组件A发布消息事件

使用 myPubsh 中的 publish 方法进行消息的发布；

// ChildA 文件
import {useState} from 'react'
import { myPubsh } from './myComPubsuh'
export default function ChildA() {const [message, setMessage] = useState('躺平')// 通过按钮发布消息const handlePubilsh = () => {myPubsh.pubilsh('onabortMessage', message)}const handleInputChange = (e) => {setMessage(e.target.value)// 通过input 自身change 事件触发发布消息// 调用 发布订阅类中的 pubilsh 方法myPubsh.pubilsh('onabortMessage', message)}return (<div><h3>组件A</h3><p>发布消息:{message}</p><input type="text" value={message} onChange={handleInputChange} /><button onClick={handlePubilsh}>发布</button></div>)
}

3、子组件B订阅发布的消息

利用useEffect() Hook 自身的特性，

第二个参数为空时候:
a、渲染完成时候，会加载执行一次；
b、组件中任何属性更新时候，都会执行一次；

若 内部有return 函数，代表组件卸载时候会执行；

// ChildB 组件
import { useEffect, useState } from 'react'
import { myPubsh } from './myComPubsuh'
export default function ChildB() {const [message, setMessage] = useState('')// 利用useEffect() hookuseEffect(() => {const onHandleMsg = (data) => {setMessage(data)}// 订阅 消息myPubsh.subscribe('onabortMessage', onHandleMsg)return () => {// 回调函数执行卸载myPubsh.unsubscribe('onabortMessage', onHandleMsg)}}, [])return (<div><h3>组件B</h3><p>订阅，组件A发布的信息</p><p>{message}</p></div>)
}

4、父组件中调用两个子组件

import ChildA from './childA'
import ChildB from './childB'
export default function index() {return (<><ChildA></ChildA><hr /><ChildB></ChildB></>)
}

如图效果：

这种发布订阅模式，可以在任意组件中使用，不会局限于兄弟组件，父子组件，祖孙组件，多层级组件都可以实现应用；
优点：
a、组件之间解耦，组件之间不需要彼此引用，可以通过定义的发布订阅类进行通讯；
b、简化状态管理，组件只需要关注自己本身的业务，其他事件由发布订阅类进行处理；
c、异步通信：发布-订阅模式通常支持异步消息传递，这可以提高系统的响应性和效率
d、灵活性：订阅者可以根据自己的需求选择订阅或取消订阅某个主题或频道。
e、扩展性：由于发布者和订阅者是解耦的，所以可以容易地增加更多的发布者或订阅者，而不需要对现有系统进行大的修改。
缺点：
a、内存泄漏，使用的发布订阅方法，在组件卸载时候，没有进行注销，会导致事件越来越多；
b、状态跟踪不清晰，复杂的业务场景下，难以追踪状态的变更；
c、复杂性：随着订阅者数量的增加，管理和维护订阅关系可能会变得复杂。
d、安全性：由于发布者不直接与订阅者交互，所以可能需要额外的机制来确保消息的安全性和完整性
e、消息积压和延迟：如果订阅者无法及时处理收到的消息，可能会导致消息在某处积压，从而引发延迟或其他相关问题。

qiong yao qushi