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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM