pubsub-js在react中的使用

pubsub-js 是一个用于实现发布-订阅模式的 JavaScript 库，可以用于不同组件之间的通信。在 React 中，可以使用 pubsub-js 来实现组件之间的通信。

以下是在 React 中使用 pubsub-js 的示例代码：

安装 pubsub-js 库

使用 npm 或 yarn 安装 pubsub-js：

npm install pubsub-js

# 或

yarn add pubsub-js

在组件中订阅消息

在组件中使用 PubSub.subscribe() 方法订阅消息：

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

function App() {
  const [message, setMessage] = useState('');

  useEffect(() => {
    const token = PubSub.subscribe('message', (topic, data) => {
      setMessage(data);
    });

    return () => {
      PubSub.unsubscribe(token);
    };
  }, []);

  return (
    <div>
      <span>{message}</span>
    </div>
  );
}

export default App;

 

在这个示例代码中，使用 useState 定义了一个名为 message 的状态。在 useEffect 钩子函数中，使用 PubSub.subscribe() 方法订阅名为 message 的消息，并将消息内容保存到 message 状态中。使用 PubSub.unsubscribe() 方法在组件卸载时取消订阅。在组件中发布消息

在组件中使用 PubSub.publish() 方法发布消息

import React from 'react';
import PubSub from 'pubsub-js';

function Button() {
  const handleClick = () => {
    PubSub.publish('message', 'Hello, world!');
  };

  return (
    <button onClick={handleClick}>Click me</button>
  );
}

export default Button;

 在这个示例代码中，使用 PubSub.publish() 方法发布名为 message 的消息，并将消息内容设置为 'Hello, world!'。

需要注意的是，在使用 pubsub-js 进行组件通信时，要避免出现命名冲突或不必要的数据传输，以保证应用程序的可维护性和性能。