政务建设网站得必要性,网站销户说明,广告联盟排行,个人网站 可以自己做服务器组件之间通讯常用方案 1、通过props 2、通过context 3、通过发布订阅模式 4、通过Redux 后面会有专栏介绍
1、安装 pubsub-js 插件 yarn add pubsub-js
常用的事件 a、发布事件#xff1a;传入一个自定义事件名称#xff08;name#xff09;#xff0c;以及要发布的消息内…组件之间通讯常用方案 1、通过props 2、通过context 3、通过发布订阅模式 4、通过Redux 后面会有专栏介绍
1、安装 pubsub-js 插件 yarn add pubsub-js
常用的事件 a、发布事件传入一个自定义事件名称name以及要发布的消息内容messagePubsub.publish(name, message) 还可以进行异步发布 Pubsub.publishSync(name, message) b、订阅事件传入发布事件的的名称 name以及接收name事件传递参数的回调函数 callback最终会返回一个类似setTimeout 的timer 用于标记当前订阅的事件在取消订阅时候可以之间传入此值 let sub0 Pubsub.subscribe(name, callback)
c、取消订阅 Pubsub.unsubscribe(name) // 可以传入发布事件名称进行取消 Pubsub.unsubscribe(sub0) // 还可以传入 订阅事件返回的标识进行取消
2、在发布事件组件中引入
相对于自定义的发布订阅器要简单一些 可以同时发布多个事件
// 引入插件
import PubSub from pubsub-js
export default function ChildA() {const handlePublish () {// 调用发布事件PubSub.publish(onChangeName, 修改名称)}return (div style{{background:blue}}h3组件A/h3button onClick{handlePublish}发布/button/div)
}
3、在订阅组件中使用
可以订阅多个事件取消多个事件
import { useEffect, useState } from react
import PubSub from pubsub-js
export default function ChildB() {const [name, setName] useState()const handleEvents (fncName, data) {/**** description 回调函数接收两个参数* param {String} fncName 发布的函数名称例如onChangeName* param {any} data 发布传递的数据消息* */ console.log(msg, fncName, data)// 通过 useState 的set 函数进行视图更新setName(data)}useEffect(() {// 订阅事件let token1 PubSub.subscribe(onChangeName,handleEvents)return () {PubSub.unsubscribe(onChangeName) // 卸载时解除订阅// 两种卸载时候取消订阅方案// PubSub.unsubscribe(token1) // 卸载时解除订阅}}, [])return (divh3组件B/h3p组件A传递消息: {name}/p/div)
}
4、在父组件中使用
import ChildA from ./childA
import ChildB from ./childB
export default function MyPubsub() {return (div style{{background: red, padding: 12px, width: 360px, height: 500px}}h2父组件/h2ChildA/ChildAhr /{/* 完全独立的两个子组件 */}ChildB/ChildB /div)
}注意 a、不管是自定义发布订阅器还是直接使用插件在组件卸载时候都有将当前组件的订阅取消避免过多订阅运行导致内存溢出 b、使用插件相对更加方便简洁只需要关注及时调用 api既可以不需要注意发布订阅器里面的逻辑 c、要避免多状态多个发布订阅器存在多组件中会在出现bug时候造成难以追踪定位问题点
