使用PubSub-JS时ReactNative在后台运行一段时间唤醒后,组件无法scribe到publish的事件,typescript实现一个事件订阅发布组件


发布者 ourjs  发布时间 1733930577434
关键字 react hooks  TypeScript 

通过 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)
    }
}








  开源的 OurJS
OurJS开源博客已经迁移到 OnceOA 平台。

  关注我们
扫一扫即可关注我们:
OnceJS

OnceOA