定制网站对公司有什么好处,上传网站,青创网官网,网站建设存在的困难问题组件之间通讯常用方案 1、通过props 2、通过context 3、通过发布订阅模式 4、通过Redux 后面会有专栏介绍
什么情况下使用发布订阅模式
a、当我们想要兄弟组件之间通讯#xff0c;而共同的父组件中又用不到这些数据时候#xff1b; b、当多个毫无相关的组件之间想要进行数据…组件之间通讯常用方案 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 (divh3组件A/h3p发布消息:{message}/pinput typetext 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 (divh3组件B/h3p订阅组件A发布的信息/pp{message}/p/div)
}
4、父组件中 调用两个 子组件
import ChildA from ./childA
import ChildB from ./childB
export default function index() {return (ChildA/ChildAhr /ChildB/ChildB/)
}如图效果
这种发布订阅模式可以在任意组件中使用不会局限于兄弟组件父子组件祖孙组件多层级组件都可以实现应用 优点 a、组件之间解耦组件之间不需要彼此引用可以通过定义的发布订阅类进行通讯 b、简化状态管理组件只需要关注自己本身的业务其他事件由发布订阅类进行处理 c、异步通信发布-订阅模式通常支持异步消息传递这可以提高系统的响应性和效率 d、灵活性订阅者可以根据自己的需求选择订阅或取消订阅某个主题或频道。 e、扩展性由于发布者和订阅者是解耦的所以可以容易地增加更多的发布者或订阅者而不需要对现有系统进行大的修改。 缺点 a、内存泄漏使用的发布订阅方法在组件卸载时候没有进行注销会导致事件越来越多 b、状态跟踪不清晰复杂的业务场景下难以追踪状态的变更 c、复杂性随着订阅者数量的增加管理和维护订阅关系可能会变得复杂。 d、安全性由于发布者不直接与订阅者交互所以可能需要额外的机制来确保消息的安全性和完整性 e、消息积压和延迟如果订阅者无法及时处理收到的消息可能会导致消息在某处积压从而引发延迟或其他相关问题。
qiong yao qushi
