在React中使用PubSubJS進行組件通信什么是 pubsub?主要特征下載引入基本例子在 react 中簡單使用總結

發(fā)布時間：2023-07-03 15:05:39 作者：網友整理

什么是 pubsub?

PubSubJS 是一個利用 JAVAScript 進行發(fā)布/訂閱式通信的庫。

gitHub：https://github.com/mroderick/PubSubJS

主要特征

無依賴
同步解耦
與ES3兼容。PubSubJS應該能夠在任何可以執(zhí)行JavaScript的地方運行。瀏覽器，服務器，電子書閱讀器，舊手機，游戲機。
AMD / CommonJS模塊支持
不修改訂閱者（jQuery自定義事件修改訂閱者）
易于理解和使用（由于同步解耦）
小（ish），少于1kb，已壓縮并壓縮

下載引入

通過CDN方式：

http://www.jsdelivr.com/#!pubsubjs
https://cdnjs.com/libraries/pubsub-js
https://unpkg.com/pubsub-js

<script src="https://unpkg.com/pubsub-js"></script><script>console.log(PubSub)</script>

npm：

npm install pubsub-js

yarn：

yarn add pubsub-js

import PubSub from 'pubsub-js'// orconst PubSub = require('pubsub-js')

基本例子

通過PubSub變量的 publish(id, data) 方法發(fā)布，并且傳遞需要交流的信息。

id：發(fā)布的消息ID 為pubsub-js提供辨識，唯一性，不可重復

data: 發(fā)布消息傳遞的參數，如果要傳遞多個參數，請傳遞對象類型

發(fā)布完消息之后，就可以開始訂閱了

通過 PubSub.subscribe(id, callback(message, data){}) 訂閱消息

id：對應之前 publish的 id

callback: 回調函數，第一個參數為 id , 第二個參數為 publish(id, data) 中 data 傳遞的參數

在 react 中簡單使用

實現一個父組件中包含兩個兄弟組件，它們分別是 search 搜索組件，以及根據 search 組件搜索結果的不同，Result 組件進行不同的響應。

父組件：

    render () {        return (            <div className="App">                <Search />                <Result />            </div>          )    }

Search組件

import React, { Component }from 'react'import PubSub from 'pubsub-js'export default class Search extends Component {    handleSearch () {        const searchName = this.input.value.trim()        // 發(fā)布 search、傳遞用戶在搜索框中輸入的結果        PubSub.publish('search', searchName)     }    render () {        return (           <div>                <input type="text" name="search" ref={input => this.input = input} />                <button onClick={this.handleSearch.bind(this)}>搜索</button>           </div>        )    }}

Result 組件

import React, { Component }from 'react'import PubSub from 'pubsub-js'export default class Search extends Component {    state = { searchName: null }       componentDidMount () {        // 訂閱 search 消息， 并根據輸入結果進行不同處理        PubSub.subscribe('search', (msg, data) => {            console.log('msg：', msg)            console.log('data：', data)            this.setState({ searchName: data })        })    }    render () {        return (        <div>{this.state.searchName}</div>        )    }}