pubsub

釋：消息訂閱與發(fā)布
點(diǎn)擊進(jìn)入gitee

消息訂閱與發(fā)布機(jī)制

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

作用

使用于任意組件間通信

安裝

yarn add pubsub-js

引入(每個(gè)組件使用時(shí)都需要)

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

語(yǔ)法

發(fā)布

//異步發(fā)布主題 PubSub.publish('主題','內(nèi)容'） //同步發(fā)布主題，這在某些環(huán)境中更快 //但是當(dāng)一個(gè)主題在相同的執(zhí)行鏈,小心使用 PubSub.publishSync('主題','內(nèi)容'）

訂閱

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

取消訂閱

一般在componentWillUnmount中取消訂閱

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

react做的一個(gè)小例子

場(chǎng)景：組件a和組件b之間的通信，兄弟關(guān)系

//組件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>{`這里時(shí)接收到的內(nèi)容——————`${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 })// 發(fā)送PubSub.publish('TEXT', this.state.obj);}render(){return(<input type="text" onChange={(e)=>{this.onSettext(e)}>)} }

總結(jié)

以上是生活随笔為你收集整理的组件通信之pubsub的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。