什么是 pubsub?

在React中使用PubSubJS进行组件通信

PubSubJS 是一个利用 Script 进行发布/订阅式通信的库。

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

主要特征

无依赖
同步解耦
与ES3兼容。PubSubJS应该能够在任何可以执行的地方运行。浏览器，服务器，电子书阅读器，旧，游戏机。
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) 方法发布，并且传递需要交流的信息。

id：发布的消息ID 为pubsub-js提供辨识，唯一性，不可重复

data: 发布消息传递的参数，如果要传递多个参数，请传递对象类型

发布完消息之后，就可以开始订阅了

通过 PubSub.subscribe(id, callback(message, data){}) 订阅消息

id：对应之前 publish的 id

callback: 回调函数，第一个参数为 id , 第二个参数为 publish(id, data) 中 data 传递的参数

在 react 中简单使用

实现一个父组件中包含两个兄弟组件，它们分别是 search 搜索组件，以及根据 search 组件搜索结果的不同，Result 组件进行不同的响应。

父组件：

    render () {        return (            <div className="">                <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()        // 发布 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>        )    }}