PubSubJS的基本使用——对于React的消息订阅与发布

引言

为了解决在React中兄弟组件间的消息通信（此处为组件List和Search），我们可以利用PubSubJS这个工具库来实现。

在React中的适用场景

在任意组件间的沟通

下载引入的两种方式

1.使用npm

npm install pubsub-js --save

2.使用yarn

yarn add pubsub-js

官方基础使用案例

关键函数：PubSub.subscribe()、PubSub.publish()、PubSub.unsubscribe()、PubSub.publishSync()

// 创建一个消息订阅的回调函数
var mySubscriber = function (msg, data) {
    console.log( msg, data );
};

// 对一个消息'MY TOPIC'进行订阅，若收到叫'MY TOPIC'的消息，则调用mySubscriber回调函数
// 并把这个消息订阅保存到token中，若某个时机，这个消息订阅不再被需要，则可以利用PubSub.unsubscribe（token）将其删除（类似于setTimeout的创建和删除）
var token = PubSub.subscribe('MY TOPIC', mySubscriber);

// 发布一个叫做'MY TOPIC'的消息，其传递的消息内容为'hello world!'
PubSub.publish('MY TOPIC', 'hello world!');

//取消消息订阅
PubSub.unsubscribe(token)

Demo实例代码

消息订阅：List组件中

	componentDidMount(){
	//注意此处参数中的_，在后面的注意事项中会有对这个的解析
		this.token = PubSub.subscribe('事件名字',(_,stateObj)=>{
			this.setState(stateObj)
		})
	}

	componentWillUnmount(){
		PubSub.unsubscribe(this.token)
	}

消息发布：Search组件中

search = ()=>{
		//获取用户的输入(连续解构赋值+重命名)
		const {keyWordElement:{value:keyWord}} = this
		//发送请求前通知List更新状态
		PubSub.publish('事件名字',{isFirst:false,isLoading:true})
		//发送网络请求
		axios.get(`/api1/search/users?q=${keyWord}`).then(
			response => {
				//请求成功后通知List更新状态
				PubSub.publish('事件名字',{isLoading:false,users:response.data.items})
			},
			error => {
				//请求失败后通知App更新状态
				PubSub.publish('事件名字',{isLoading:false,err:error.message})
			}
		)
	}

注意事项：
由于函数关于参数的接收是有顺序的，因此 由于PubSub.subscribe()中的第二个参数回调函数的参数，必须接收两个，前者为msg，后者为data，所以即便不需要msg，也要用_对第一个参数进行占位操作。

关于PubSubJS的更多使用方法和规则，可参考Github上的PubSubJS