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

什么是 pubsub?PubSubJS 是一个利用 JAVAScript 进行发布/订阅式通信的库。
gitHub：https://github.com/mroderick/PubSubJS

文章插图

主要特征

无依赖
同步解耦
与ES3兼容。PubSubJS应该能够在任何可以执行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://www.isolves.com/it/cxkf/yy/js/2019-12-20/"https://unpkg.com/pubsub-js">

文章插图

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="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()// 发布 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>)}}

文章插图

文章插图

总结PubSubJS 可以让我们很轻松的处理不同组件之间的通信，同时不足 1k 的体积也不同对项目造成什么负担。
不只是React, PubSubJS也适用于 Vue 等其它框架项目。
官方文档传送门：https://github.com/mroderick/PubSubJS
源码传送门：https://unpkg.com/pubsub-js@1.7.0/src/pubsub.js

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