React消息订阅与转发机制实现兄弟组件传值

1，组件通信

在React组件中实现组件之间的通信方式有很多，像父子组件传值，父组件将要传递的参数添加到props 子组件获取props中的值来进行传值  子组件传父组件 通过父组件传递过来的回调函数来实现传值

例如：

 如果D组件需要向E组件传值可以将状态定义子在A组件上  分别向BC传递参数，再分别向DE传递参数 D组件可以调用函数 改变A中的状态 同时也改变了E组件中的props 实现了D向E组件传值 这种方法可行 但是在项目中如果 组件嵌套的更深 代码很难维护。

还可放到redux中解决 但是如果需求仅仅是实现组件传值 显得没那么必要啦

 那么我们就用到啦消息订阅与发布机制

2.消息订阅与发布机制

• 订阅消息

  PubSub.subscribe('clearCount', this.clear)

 clear = (msgName, data) => {
        const {count} =data
        this.setState({
            count: count
        })
    }

通过PubSub.subscribe()订阅消息  第一个参数是订阅的消息名称 可以自定义  第二个参数是订阅的回调函数   这个回调函数有两个参数  第一个参数是订阅的消息名称  第二个参数是data传过来的数据

• 发布消息

    PubSub.publish('clearCount',{count:0})

通过PubSub.publish()发布消息，第一个参数为发布的消息名称，第二个参数为发布消息的数据，可以是对象、字符串、数字等类型。

• 取消订阅

PubSub.unsubscribe(token);

要在合适的时间取消订阅

3.React实现

定义一个A组件 发布清零的消息

import React, { Component } from 'react'
import PubSub from 'pubsub-js';
export default class comA extends Component {

   
    sendMsg = () => {
          PubSub.publish('clearCount',{count:0})
    }
    render() {
        return (
            <div>
                <button onClick={this.sendMsg}>发布消息</button>
            </div>
        )
    }
}

定义个一个B组件  订阅消息  把累计增加的值清零

import React, { Component } from 'react'
import PubSub from 'pubsub-js'
export default class comB extends Component {
    state = { count: 0 }

    increment = () => {
        this.setState({
            count: this.state.count + 1
        })
    }

    clear = (msgName, data) => {
        const {count} =data
        this.setState({
            count: count
        })
    }

    componentDidMount() {
      
      this.mysub =  PubSub.subscribe('clearCount', this.clear)
    }

    componentWillUnmount(){
        PubSub.unsubscribe(this.mysub)
    }

    render() {
        const { count } = this.state
        return (
            <div>
                我是B  计数{count}
                <button onClick={this.increment}>add</button>
            </div>
        )
    }
}

注意 在卸载组件的时候 取消订阅