pubsub

釋：消息訂閱與發布
點擊進入gitee

消息訂閱與發布機制

1,先訂閱,在發布
2,使用于任意組件間通信
3,要在組件的componentWillUnmount中取消訂閱

作用

使用于任意組件間通信

安裝

yarn add pubsub-js

引入(每個組件使用時都需要)

使用es6引入：import PubSub from 'pubsub-js;
使用CommonJS：const PubSub = require('pubsub-js');

語法

發布

//異步發布主題 PubSub.publish('主題','內容'） //同步發布主題，這在某些環境中更快 //但是當一個主題在相同的執行鏈,小心使用 PubSub.publishSync('主題','內容'）

訂閱

// token:保留返回的令牌，以便能夠取消訂閱 token = PubSub.subscribe('主題',(titleName,data)=>{//titleName 主題名稱//data 返還的數據 })

取消訂閱

一般在componentWillUnmount中取消訂閱

//取消單個訂閱,放入令牌即可 PubSub.unsubscribe(token); //取消函數的所有訂閱（這里說的函數就是PubSub.subscribe的第二個參數——回調函數） PubSub.unsubscribe(fnName); //清除所有訂閱 PubSub.clearAllSubscriptions();

react做的一個小例子

場景：組件a和組件b之間的通信，兄弟關系

//組件a class A extends Component{state = {obj:{},}componentDidMount() {//訂閱this.token = PubSub.subscribe('TEXT', (msg, data) => {this.setState({obj:data})});}componentWillUnmount(){//取消訂閱PubSub.unsubscribe(this.token)}render(){let {obj:{text}}=this.statereturn(<div>{`這里時接收到的內容——————`${text}}</div>)} } //組件b class B extends Component{state={obj:{text:''}}onSettext(e){let value = e.target.value;let { obj } = this.state;obj.text = value;this.setState({ obj })// 發送PubSub.publish('TEXT', this.state.obj);}render(){return(<input type="text" onChange={(e)=>{this.onSettext(e)}>)} }

總結

以上是生活随笔為你收集整理的组件通信之pubsub的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。