消息订阅与发布机制(兄弟或不同组件间的通信)

391 阅读1分钟

组件间传递数据

1.在React中父子组件可以通过props加回调函数的形式进行通信
2.兄弟组件间可以将数据传递给共同的父组件,再通过父组件传给子组件,这样比较繁琐
3.于是有了消息订阅与发布机制

使用步骤

1.引入库
npm  i  pubsub-js
2.页面中引入
import PubSub from 'pubsub-js'

3.在使用数据的地方发布
PubSub.publish("频道","频道发布的消息")
例如 :   PubSub.publish('ygy',{
        isFirst:false,
        isLoading:true
    })
    
4.订阅
   PubSub.subscribe("频道", (msg,data)=> {
    console.log(msg,data)
  })
例子: componentDidMount(){
    this.taken = PubSub.subscribe('ygy',(_,stateObj)=>{ //_是占位符,可以换成变量
            console.log(stateObj);
            this.setState(stateObj);
    })
 }

5.取消订阅
   componentWillUnmount(){
    PubSub.unsubscribe(this.taken);
}