中介者模式在React中的应用

在我们生活的世界中，每个人每个物体之间都会产生一些错综复杂的联系。在应用程序里也更是一样，程序由大大小小的单一对象组成，所有这些对象都按照某种关系和规则来通信。

什么是中介者模式

中介者模式是一种行为设计模式，它允许我们定义一个对象（中介者），它封装了一组对象如何交互的方式。这种模式被认为是一种对象行为模式，因为它可以改变程序运行时的行为。

在中介者模式中，对象之间不直接通信，而是通过中介者对象进行通信。这减少了通信对象之间的依赖关系，从而降低了系统的耦合度。当多个对象相互作用以产生工作效果，并且每个对象都知道其他对象的时候，它会导致系统变得复杂，而这种复杂性通常表现为很难管理和维护的网络式通信。

没有中介者模式

在一个没有中介者的农贸市场中，顾客和卖家之间的互动是直接的。顾客需要亲自走访各个摊位，询问关于产品的种种信息，如产地、生产方式，甚至是个别食材的烹饪建议。这种直接沟通有助于建立信任和个人联系，可能导致顾客成为常客。同时，买卖双方在交易中也会直接协商价格和交易条款，没有第三方介入，可能为顾客带来更好的价格，而卖家也可能因此获得更高的利润。

然而，这种方式也有其缺点。顾客可能会感到决策疲劳，因为他们需要在多个选项中做出选择，并且在没有统一的评价体系或价格标准的情况下，评估和比较各种产品可能会更加困难。同时，每次交易都可能需要花费更多的时间和精力，这在忙碌的日常生活中可能不太理想。尽管如此，直接的买卖方式提供了一种更个性化且有趣的购物体验，这在现代商业中依然保有其独特的吸引力。

中介者模式在生活中的案例

在现实生活中，房地产经纪人就是一个中介者模式的实例。当人们想要买卖房产时，他们通常会雇佣一个房地产经纪人来协助这一过程。

房地产经纪人作为买家和卖家之间的中介者，负责协调所有与房产交易相关的活动。他们了解市场情况，可以为卖家定价房产，为买家寻找合适的房源，还可以组织和安排房屋展示。当买家对某个房产感兴趣时，他们会通过经纪人向卖家提交报价，经纪人还会帮助双方协商价格和销售条件。

此外，房地产经纪人还会帮助客户处理繁杂的文件工作，确保所有必要的法律文件都得到妥善处理，交易能够顺利完成。在整个买卖过程中，经纪人都会作为中心节点，确保信息准确传递，并协助解决可能出现的任何问题。

通过使用房地产经纪人，买家和卖家不需要直接交流，这样可以节省时间，减少误解，并有助于顺利达成交易。这就是中介者模式在现实生活中的一个典型案例。

中介者模式在 Js 中的应用

假设我们有一个在线拍卖系统，该系统允许用户出价并在拍卖结束时通知所有用户最终结果。这里的中介者可以是拍卖控制器，负责管理出价和通知用户。

在线拍卖平台，有以下参与者：

• 拍卖控制器（中介者）：管理拍卖过程，记录出价，通知用户。
• 拍卖者：参与拍卖，出价。
• 拍卖结束时的通知系统：通知每个参与者拍卖的结果。

具体信息请看以下代码所示：

// 中介者
class AuctionMediator {
  constructor() {
    this.buyers = {};
    this.currentBid = 0;
    this.currentWinner = null;
  }

  registerBuyer(buyer) {
    this.buyers[buyer.name] = buyer;
    buyer.setMediator(this);
    console.log(`${buyer.name} 已经注册参加拍卖。`);
  }

  bid(buyerName, amount) {
    if (amount > this.currentBid) {
      this.currentBid = amount;
      this.currentWinner = buyerName;
      console.log(`新出价 ${amount} 元，出价者为 ${buyerName}`);
    } else {
      console.log(
        `出价者 ${buyerName} 的出价 ${amount} 元被忽略，因为当前最高出价为 ${this.currentBid} 元。`
      );
    }
  }

  announceWinner() {
    Object.values(this.buyers).forEach((buyer) =>
      buyer.notify(this.currentWinner, this.currentBid)
    );
  }
}

// 拍卖者
class Buyer {
  constructor(name) {
    this.name = name;
    this.mediator = null;
  }

  setMediator(mediator) {
    this.mediator = mediator;
  }

  makeBid(amount) {
    this.mediator.bid(this.name, amount);
  }

  notify(winnerName, bidAmount) {
    if (winnerName === this.name) {
      console.log(`${this.name}，恭喜你以 ${bidAmount} 元的出价赢得了拍卖！`);
    } else {
      console.log(
        `${this.name}，你未能赢得拍卖。商品被 ${winnerName} 以 ${bidAmount} 元的出价购得。`
      );
    }
  }
}

// 使用中介者模式
const auction = new AuctionMediator();
const bob = new Buyer("Bob");
const alice = new Buyer("Alice");
const carol = new Buyer("Carol");

auction.registerBuyer(bob);
auction.registerBuyer(alice);
auction.registerBuyer(carol);

bob.makeBid(50);
alice.makeBid(75);
carol.makeBid(70); // 这个出价会被忽略，因为比当前最高出价低
alice.makeBid(85);

// 拍卖结束，宣布胜出者
auction.announceWinner();

在上述代码中：

• AuctionMediator 类扮演中介者角色，管理出价并在拍卖结束时通知用户。
• Buyer 类扮演同事的角色，可以出价并接收拍卖结果的通知。
• registerBuyer 方法用于将买家注册到拍卖中。
• bid 方法允许买家通过中介者出价。
• announceWinner 方法由中介者调用来通知所有买家拍卖结果。

通过这种方式，买家不需要直接相互通信，而是通过拍卖控制器（中介者）来协调整个过程。这样做可以轻松地添加新的买家或更改通知逻辑，而不会影响到买家类的实现。

中介者模式在 React 中的应用

在 React 中，中介者模式通常表现为状态管理的模式，其中一个中央状态（通常是上层组件的状态或使用如 Redux、Context API 等全局状态管理库）扮演中介者的角色，管理子组件之间的交流。

下面的代码是一个简单的例子，展示了如何在 React 中实现一个聊天应用，其中一个父组件作为中介者，协调不同子组件之间的消息传递。如下代码所示：

import React, { useState } from "react";

// 聊天记录组件
const ChatLog = ({ messages }) => {
  return (
    <ul>
      {messages.map((msg, index) => (
        <li key={index}>{msg}</li>
      ))}
    </ul>
  );
};

// 发送消息组件
const SendMessage = ({ onSend }) => {
  const [message, setMessage] = useState("");

  const send = () => {
    onSend(message);
    setMessage("");
  };

  return (
    <div>
      <input
        type="text"
        value={message}
        onChange={(e) => setMessage(e.target.value)}
      />
      <button onClick={send}>发送</button>
    </div>
  );
};

// 中介者组件
const ChatRoom = () => {
  const [messages, setMessages] = useState([]);

  const handleSend = (message) => {
    setMessages([...messages, message]);
  };

  return (
    <div>
      <ChatLog messages={messages} />
      <SendMessage onSend={handleSend} />
    </div>
  );
};

export default ChatRoom;

在上面的这些代码中：

• ChatRoom 组件扮演中介者的角色，管理聊天消息的状态。
• ChatLog 组件负责显示聊天记录，它接收 messages 作为 props。
• SendMessage 组件允许用户输入消息并发送，它通过 onSend 回调函数将消息传递给 ChatRoom。

这种模式使得消息的传递和状态的更新都通过 ChatRoom 组件进行协调，这减少了子组件之间的直接通信，降低了组件间的耦合度。在更复杂的应用中，可以使用 Context API 或 Redux 等工具来实现中介者模式，以管理跨多个组件的状态。

总结

中介者模式是一个设计模式，它通过引入一个中间的协调者对象来简化多个对象或类之间的交互。这种模式减少了系统中不同组件之间的直接通信，从而降低了耦合度。在实际应用中，这有助于更容易地维护和扩展系统。但是，如果中介者承担过多职责，它可能会变得复杂，成为维护的难点。在 JavaScript 和 React 等前端技术中，中介者模式常用于状态管理和组件间通信。