观察者模式和发布订阅模式

文章目录

观察者模式

Subject 和 Observer 直接绑定,中间无媒介。如点击事件,事件直接和按钮进行绑定。

发布订阅模式

Publisher 和 Observer 相互不认识,中间有媒介。如在 A 组件中绑定一个事件,在 B 组件中触发这个事件,这个两个组件相隔十万八千里互补认识,那么就通过中间event这个媒介来通讯。

发布订阅模式需要在代码中触发 emit ,而观察者模式没有 emit

手写观察者模式

jsx 复制代码
import React, { useState, useEffect } from 'react';

// 观察者函数
const observer = (newValue) => {
  console.log(`Subject changed to ${newValue}`);
};
const SubjectComponent = () => {
  // 使用useState创建一个状态变量
  const [subject, setSubject] = useState('Initial Value');
  // 使用useEffect来模拟观察者模式
  useEffect(() => {
    // 当subject变化时,调用观察者函数
    observer(subject); 
  }, [subject]); // 依赖数组中包含subject,这样每当subject变化时,useEffect都会执行
  // 更新subject的方法
  const updateSubject = () => {
    setSubject('Updated Value');
  };
  return (
    <div>
      <p>Subject: {subject}</p>
      <button onClick={updateSubject}>Update Subject</button>
    </div>
  );
};

export default SubjectComponent;

手写发布订阅模式

jsx 复制代码
// EventBus.js
import { createContext, useContext, useState } from 'react';

const EventBusContext = createContext();

export const EventBusProvider = ({ children }) => {
  const [events, setEvents] = useState({});

  const subscribe = (eventName, callback) => {
    if (!events[eventName]) {
      setEvents((prevEvents) => ({
        ...prevEvents,
        [eventName]: [],
      }));
    }
    setEvents((prevEvents) => ({
      ...prevEvents,
      [eventName]: [...prevEvents[eventName], callback],
    }));
  };

  const publish = (eventName, data) => {
    if (events[eventName]) {
      events[eventName].forEach((callback) => callback(data));
    }
  };

  return (
    <EventBusContext.Provider value={{ subscribe, publish }}>
      {children}
    </EventBusContext.Provider>
  );
};

export const useEventBus = () => useContext(EventBusContext);
相关推荐
菌菇汤1 分钟前
uni-app实现单选,多选也能搜索,勾选,选择,回显
前端·javascript·vue.js·微信小程序·uni-app·app
Ramos丶9 分钟前
【ABAP】 从无到有 新建一个Webdynpro程序
java·前端·javascript
摸鱼仙人~19 分钟前
如何创建基于 TypeScript 的 React 项目
javascript·react.js·typescript
qq_4116719828 分钟前
vue3 的模板引用ref和$parent
前端·javascript·vue.js
vvilkim2 小时前
Nuxt.js 页面与布局系统深度解析:构建高效 Vue 应用的关键
前端·javascript·vue.js
滿2 小时前
Vue3 父子组件表单滚动到校验错误的位置实现方法
前端·javascript·vue.js
专注VB编程开发20年2 小时前
javascript的类,ES6模块写法在VSCODE中智能提示
开发语言·javascript·vscode
某公司摸鱼前端7 小时前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
要加油哦~7 小时前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用
前端·javascript·vue.js
wen's9 小时前
React Native 0.79.4 中 [RCTView setColor:] 崩溃问题完整解决方案
javascript·react native·react.js