React 利用消息订阅与发布机制实现组件通信

「这是我参与11月更文挑战的第23天，活动详情查看：2021最后一次更文挑战」。

1. 两组件通信

在 React 中，组件之间的通信方式有很多。例如在父子组件中，父组件向子组件通信时，可以将参数写在props传递给子组件；子组件向父组件通信时，可以使用回调函数的方式，父组件传递给子组件一个函数，子组件通过调用这个函数，实现向父组件通信。父子组件通信，具体看这里。

但是，假如有这样一些组件，A组件下有B组件和C组件，B组件下有D组件，C组件下有E组件，如图所示：

如果需要D组件向E组件通信，即D组件向E组件传值，可以将状态定义在公共的父组件A上，分别向B、C组件传递参数和函数，再依次传递给D组件和E组件。D组件可以调用函数，改变A中的状态，同时也就会改变了E组件的props，实现了D组件向E组件的通信。这种方式实现起来可行，但太过于繁琐，如果组件嵌套得更深，代码将难以维护。

另一种思路是可以将状态定义在redux中，统一管理。E组件使用redux中的值，D组件改变redux中的值。但需求仅仅是实现D组件向E组件传值，就引入了redux，显得没那么必要。

还有一种解决方案，即使用消息订阅与发布机制，主要实现步骤：要实现D组件向E组件传值，在E组件中，订阅消息，在D组件中，发布相应的消息，E组件中就会得到相应的数据。这种方式适合任意关系组件的通信。下面是 React 中消息订阅与发布机制的具体实现。

2. 消息订阅与发布机制

1. 订阅消息

// 创建订阅的回调函数
var mySubscriber = function (msg, data) {
    console.log(msg, data);
};

// 订阅
var token = PubSub.subscribe('MY TOPIC', mySubscriber);
复制代码

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

2. 发布消息

// 发布
PubSub.publish('MY TOPIC', 'hello world!');
复制代码

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

如果有人订阅了这个消息名称，当消息发布成功时，发布消息的数据就会被传到上述订阅消息的回调函数中，并被执行，拿到这个数据。

3. 取消订阅

PubSub.unsubscribe(token);
复制代码

记得要在合适的时间取消订阅。

3. React 实现

首先需要安装模块：

yarn add pubsub-js
复制代码

实现上述关系的组件：

要实现的效果为，E组件中点击add，会增加计数值。点击D组件的clear按钮，会对E组件的计数值进行清零。

首先在E组件中引入pubsub-js，并在useEffect中订阅清零消息，组件卸载时清除副作用，取消订阅。

import PubSub from 'pubsub-js';
import { useState, useEffect } from 'react';

const E = () => {
    const [count, setCount] = useState(0);

    useEffect(() => {
        // 订阅清零消息
        const mySub = PubSub.subscribe('clearCount', clear);
        return () => {
            // 取消订阅
            PubSub.unsubscribe(mySub);
        };
    }, []);

    const clear = (msgName, data) => {
        // msgName是订阅的消息名称
        // data是发布消息时，传递的参数
        // 这里我传递过来的是一个对象
        console.log(msgName, data); // clearCount {count: 0}
        const { count } = data;
        setCount(count);
    };

    return (
        <div>
            我是E, 计数值：{count}
            <button onClick={() => setCount(count => count + 1)}>add</button>
        </div>
    );
};

export default E;
复制代码

D组件中，点击clear发布消息，传递一个对象：

import PubSub from 'pubsub-js';

const D = () => {
    const pubsub = () => {
        // 发布消息
        // 第一个参数为消息名称，clearCount
        // 第二个参数为传递的参数，这里我传递一个对象
        PubSub.publish('clearCount', { count: 0 });
    };

    return (
        <div>
            我是D
            <button onClick={pubsub}>clear</button>
        </div>
    );
};

export default D;
复制代码

如上代码所示，在D组件中点击clear按钮，就发布一条清零消息clearCount，并传递一个对象，里面包含了count值。在E组件中，由于订阅过清零消息clearCount，所以会执行回调函数，在回调函数的第二个参数data中，拿到D组件传递过来的count值，并执行setCount(count)，完成清零。

这样就实现了D组件向E组件通信，总体思路，D组件发布消息并传递参数，E组件拿到参数，执行相应的操作。

实现效果：