React第十一节 组件之间通讯之发布订阅模式（自定义发布订阅器）
组件之间通讯常用方案
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() hook
useEffect(() => {
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
原文地址：https://blog.csdn.net/weixin_39593730/article/details/144245146
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！