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里也可以用哦