React中，兄弟组件通信的桥梁：发布-订阅模式

2023-10-23 18:03:35

在React中，兄弟组件之间的通信通常需要通过父组件进行中转，但这可能会导致组件结构复杂、代码难以维护。为了解决这个问题，发布-订阅模式提供了一种更为优雅的解决方案。

发布-订阅模式是一种设计模式，它允许组件之间进行通信，而无需直接引用彼此。在React中，我们可以使用Hooks来实现发布-订阅模式。

创建一个发布者组件。

import { useState } from "react";

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

  const publishMessage = (newMessage) => {
    setMessage(newMessage);
  };

  return (
    <div>
      <input type="text" value={message} onChange={(e) => setMessage(e.target.value)} />
      <button onClick={() => publishMessage("Hello from Publisher!")}>Publish</button>
    </div>
  );
};

创建一个订阅者组件。

import { useState, useEffect } from "react";

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

  useEffect(() => {
    const handleMessage = (newMessage) => {
      setMessage(newMessage);
    };

    window.addEventListener("message", handleMessage);

    return () => {
      window.removeEventListener("message", handleMessage);
    };
  }, []);

  return <div>{message}</div>;
};

在父组件中使用发布者和订阅者组件。

import { Publisher } from "./Publisher";
import { Subscriber } from "./Subscriber";

export const Parent = () => {
  return (
    <div>
      <Publisher />
      <Subscriber />
    </div>
  );
};