在react或javascript中以模式显示消息

class MessageSubject {
  constructor() {
    this.observers = [];
  }

  addObserver(observer) {
    this.observers.push(observer);
  }

  removeObserver(observer) {
    this.observers = this.observers.filter(obs => obs !== observer);
  }

  notify(message) {
    this.observers.forEach(observer => observer.update(message));
  }
}

class MessageObserver {
  update(message) {
    // 在这里进行消息的显示操作
    console.log(message);
  }
}

import React, { useEffect } from 'react';

const MessageComponent = () => {
  useEffect(() => {
    const messageSubject = new MessageSubject();
    const messageObserver = new MessageObserver();

    messageSubject.addObserver(messageObserver);

    // 模拟消息更新
    setTimeout(() => {
      messageSubject.notify('新消息');
    }, 2000);

    return () => {
      messageSubject.removeObserver(messageObserver);
    };
  }, []);

  return <div>消息组件</div>;
};