React + PubsubJS 组件之间的不同的通讯方式

PubsubJS的发布订阅模式为组件之间的通讯提供了更方便快捷的方式;语法的话很是简单，能够来这里学习 https://www.npmjs.com/package/pubsub-js

首先，在项目中初始化

npm install pubsub-js

yarn add pubsub-js

1.而后在项目里声明PubSub全局变量

2.接着在须要使用的组件里导入pubsub-js

 

3.声明一个惟一的id，或者标识符，为pubsub-js提供辨识，千万不可重复

4.使用 PubSub.publish(id, data) 开始发布，而且传递须要交流的信息；这里使用的是前几天发布的echarts柱状图示例，点击事件触发，修改它的option

5.在其余组件渲染完成以后使用 PubSub.subscribe(id, callback(message, data){}) 订阅

这里是将传递的option替换echarts原先的option 

6.效果展现

这是柱状图默认的状态

 

 点击按钮以后

echarts的样子

虽然很丑，但仍是完整的完成了任务；

同组件内也能够使用PubSub，可是没有修改state方便；

对了，最后说一句，不仅是React；在vue里也能够用哦