在项目中经常会涉及到不同组件之间的通信，特别是兄弟组件、祖孙组件这种，如果是通过 props 来传值，会比较繁琐，因此我们可以通过发布 - 订阅模式来实现不同组件间的通信，这里使用到了 pubsub-js 这个 js 库.

1、安装 pubsub-js

npm install pubsub-js

2、在需要接收消息的组件中订阅

2.1 类组件中使用

创建 Parent.jsx 组件，Child1.jsx 组件，Child2.jsx 组件

// Child1.jsx组件
import React from "react";
import pubsub from "pubsub-js";

export default class Child1 extends React.Component {
    handlePublish = () => {
        console.log("Child1发布消息了");
        pubsub.publish("message", "hello world");
    }
    render() {
        return (
            <div>
                <button onClick={() => this.handlePublish() }>发布消息</button>
            </div>
        );
    }
}

// Child2.jsx组件
import React from "react";
import pubsub from "pubsub-js";

export default class Child2 extends React.Component {
    token = ""
    // 组件挂载完毕开始订阅组件
    componentDidMount() {
        this.token = pubsub.subscribe("message", (msg, data) => {
            console.log("Child2订阅消息了", data)
        })
    }

    // 组件即将卸载时取消订阅
    componentWillUnmount() {
    	pubsub.unsubscribe(this.token)
    }

    render() {
        return <div>订阅消息</div>
    }
}

// Parent.jsx组件
import Child1 from "./Child1"
import Child2 from "./Child2"

export default class Parent extends React.Component {
    render() {
        return (
            <div>
                <Child1 />
                <Child2 />
            </div>
        )
    }
}

2.2 函数组件中使用

创建 Parent.jsx 组件、Child1 组件、Child2 组件

// Child1.jsx组件
import React from "react";
import pubsub from "pubsub-js";

export default function Child1() {
    function handlePublish () {
        console.log("Child1发布消息了");
        pubsub.publish("message", "hello world");
    }
    return (
        <div>
            <button onClick={() => handlePublish() }>发布消息</button>
        </div>
    );
}

// Child2.jsx组件
import React, { useState, useEffect } from "react";
import pubsub from "pubsub-js";

export default function Child2() {
    const [message, setMessage] = useState("")
    // 组件挂载完毕开始订阅组件
    useEffect(() => {
    	const token = pubsub.subscribe("message", (msg, data) => {
          console.log("Child2订阅消息了", data)
          setMessage(data)
      })
      return () => {
      	pubsub.unsubscribe(token)  // 取消订阅
      }
    }, []) // 传空数组，表示仅在组件挂载和卸载时执行

    return <div>订阅消息{ message }</div>
}

// Parent.jsx组件
import Child1 from "./Child1"
import Child2 from "./Child2"

export default function Parent() {
    return (
        <div>
            <Child1 />
            <Child2 />
        </div>
    )
}