通过 PubSubJS 使用类似消息中间件(发布、订阅)的方法来管理组件间的通信和数据的传递,其本身并不存储状态和处理状态变化,极大的提高性能和简化开发流程。兄弟组件间通信不必再像使用props那种通过父组件来通信,多层组件之间通信也不必在一层一层的传递,
但最后给某APP添加了一个后台运行功能。当用户把APP从后台唤醒后 PubSubJS 的事件发布/订阅机制不起作用。
react native 版本 "react": "18.3.1","react-native": "0.76.1",, 使用的是 jsc 引擎.
仔细阅读源码发现 PubSubJS 是一个默认给浏览器、node.js环境写的库,默认使用的是JavaScript V8引擎。
并且 PubSubJS 与 jQuery的事件trigger触发机制类似,支持命名空间逐层发送消息, 比如: PAGE.LOGIN 会分别发送: PAGE.LOGIN / PAGE 两个事件给订阅者,导致源码比较难以DEBUG。
这里并不需要这些功能,因此可以手动实现 publish/ subscribe 方法来代替 PubSubJS:
TypeScript版本
export type PublishCallback = ( msg: string, data?: any ) => any
const messages: { [key: string]: any[] } = {};
export const subscribe = (msg: string, callback: PublishCallback) => {
let handlers = messages[msg];
if (!handlers) {
handlers = []
messages[msg] = handlers;
}
if (!Array.isArray(handlers)) {
console.trace('subscribe error')
return
}
console.log('subscribe', msg)
handlers.push(callback)
}
export const publish: PublishCallback = (msg: string, data: any) => {
const handlers = messages[msg]
if (!handlers) {
console.log('Message do not have subscribers:', msg)
return
}
console.log('publish to handlers', handlers.length, msg, data)
for (const handler of handlers) {
handler(msg, data)
}
}
回复 (0)
微信扫码 立即评论