React学习-消息订阅

原始的消息传递方式

在React中，组件之间的消息传递通常有以下几种方式：

  1. 父组件传递给子组件：通过props传递数据。
  2. 子组件传递给父组件：通过回调函数。
  3. 兄弟组件间传递：通常需要借助共同的父组件或使用状态管理工具。

使用PubSubJS实现消息传递

PubSubJS是一个轻量级的发布-订阅库，适用于在React应用中实现组件之间的通信，特别是在组件之间没有直接父子关系的情况下。

1. 安装pubsub-js库

首先，您需要安装pubsub-js库。运行以下命令：

1
2
3
bash

npm install pubsub-js

2. 创建发布者组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import React from 'react';
import PubSub from 'pubsub-js';

const Publisher = () => {
    const sendMessage = () => {
        PubSub.publish('MY_TOPIC', 'Hello from Publisher');
    };

    return (
        <div>
            <h2>Publisher</h2>
            <button onClick={sendMessage}>Send Message</button>
        </div>
    );
};

export default Publisher;

解释：

  • Publisher组件包含一个按钮。
  • 当按钮被点击时，sendMessage函数会被调用，该函数使用PubSub.publish方法发布一个名为'MY_TOPIC'的消息，消息内容为'Hello from Publisher'。

3. 创建订阅者组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import React, { useEffect, useState } from 'react';
import PubSub from 'pubsub-js';

const Subscriber = () => {
    const [message, setMessage] = useState('');

    useEffect(() => {
        // 订阅消息
        const token = PubSub.subscribe('MY_TOPIC', (msg, data) => {
            setMessage(data);
        });

        // 清理订阅
        return () => {
            PubSub.unsubscribe(token);
        };
    }, []);

    return (
        <div>
            <h2>Subscriber</h2>
            <p>Received Message: {message}</p>
        </div>
    );
};

export default Subscriber;

解释：

  • Subscriber组件使用useState钩子来存储接收到的消息。
  • 在useEffect钩子中，组件订阅了MY_TOPIC消息。每当有消息发布到MY_TOPIC时，回调函数会被调用，将消息内容存储到message状态中。
  • useEffect的返回函数用于在组件卸载时取消订阅，以避免内存泄漏。

4. 在应用中使用发布者和订阅者组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import React from 'react';
import Publisher from './Publisher';
import Subscriber from './Subscriber';

const App = () => {
    return (
        <div>
            <h1>PubSubJS Example</h1>
            <Publisher />
            <Subscriber />
        </div>
    );
};

export default App;

解释：

  • App组件中同时包含了Publisher和Subscriber组件。
  • 当Publisher组件中的按钮被点击时，Subscriber组件会接收到消息并显示出来。

通过这个简单的例子，可以看到如何使用pubsub-js在React应用中实现组件之间的通信。这种方式特别适用于组件之间没有直接父子关系的情况。