React学习第八天：使用观察者模式解决组件间通信问题

2023-09-07 17:12:00







## 前言

在React应用中，组件间的通信是一个常见的问题。为了解决这个问题，开发者们提出了各种各样的解决方案，其中观察者模式就是其中之一。观察者模式是一种设计模式，它允许一个对象（发布者）向多个对象（观察者）发送消息，而这些对象（观察者）可以对这些消息进行响应。

## 如何使用观察者模式解决组件间通信问题

使用观察者模式解决组件间通信问题可以分为两步：

1. 在一个组件中，订阅消息。
2. 在另一个组件中，发布消息。

### 在一个组件中，订阅消息

为了在一个组件中订阅消息，我们需要使用`useEffect`钩子函数。`useEffect`钩子函数允许我们在组件挂载或更新时执行某些副作用，例如订阅消息。

```javascript
import { useEffect, useState } from "react";

const MyComponent = () => {
  const [message, setMessage] = useState("");

  useEffect(() => {
    // 订阅消息
    const subscription = pubsub.subscribe("my-topic", (message) => {
      setMessage(message);
    });

    // 组件卸载时，取消订阅
    return () => {
      subscription.unsubscribe();
    };
  }, []);

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

export default MyComponent;

在上面的代码中，我们使用useEffect钩子函数订阅了名为“my-topic”的消息。当该消息发布时，useEffect钩子函数中的回调函数就会被调用，并把消息设置为组件的状态。

在另一个组件中，发布消息

为了在另一个组件中发布消息，我们需要使用pubsub库。pubsub库是一个JavaScript库，它允许我们在应用程序中轻松地发布和订阅消息。

import { pubsub } from "@google-cloud/pubsub";

const MyOtherComponent = () => {
  const pubsubClient = new pubsub.PubSub();

  const publishMessage = () => {
    // 发布消息
    pubsubClient.topic("my-topic").publishMessage({
      data: Buffer.from("Hello, world!"),
    });
  };

  return (
    <div>
      <button onClick={publishMessage}>发布消息</button>
    </div>
  );
};

export default MyOtherComponent;