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裏也能夠用哦