React 消息订阅与发布机制
theme: channing-cyan
这是我参与11月更文挑战的第12天，活动详情查看：2021最后一次更文挑战」
用处
- 当我们想要父组件传值给子组件时，通常会使用props传值。
- 子组件传值给父组件时，通常会子组件中的事件触发一个回调函数（也是props），父组件中的对应函数再去修改值。
- 兄弟组件间传值，我通常会将子组件A的值传回父组件，父组件再传给子组件B
以上三种情况都可以使用消息订阅与发布机制来解决。
- 当然父传子还是用props比较好。
- 子组件传值给父组件，在子组件中发布，在父组件中订阅，就可以拿到相应的值
- 兄弟组件间传值，在子组件A中发布，在子组件B中订阅
消息订阅
举个例子：
订阅报纸
- 交钱，说好地址，订阅哪一种报纸
- 邮递员送报纸 订阅消息：
- 消息名称
- 发布消息
使用
很多的库都实现了这种机制，我们用主流使用较多的 PubSub
安装
npm install pubsub-js
yarn add pubsub-js引入
import PubSub from 'pubsub-js';实现
在父组件中发布（App），在子组件中订阅 （Data）
App （父）组件
class App extends React . Component {
componentDidMount() {
// publish 发布消息 消息名为：publish_one 内容为：This is publish
PubSub.publish("publish_one","This is publish")
}
render() {
return (
<div className = 'ArticleContainer'>
<Data/>
</div>
)
}
}Data（子）组件
lass Data extends React.Component{
state={
publishData:''
}
componentDidMount(){
// 订阅消息 消息名：publish_one 第二个参数是一个函数
// 此函数又有两个参数：消息名和消息数据
PubSub.subscribe("publish_one",(msg,data)=>{
this.setState({publishData:data})
})
}
render(){
return(
<div>
{this.state.publishData}
</div>)
}
}定义token
我们去GitHub中查看其文档，可以发现他将subscribe定义变量成token，这就好比定时器方法的使用一样。为了我们取消定时器/订阅。
componentDidMount(){
this.token = PubSub.subscribe('publish_one',(msg,data)=>{
this.setState({publishData:data})
})
}在有些时候需要取消订阅
为了节约资源，我们有时需要取消订阅。我们定义的token变量就有用处了
componentWillUnmount(){
PubSub.unsubscribe(this.token)
}本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2021-11-12，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录