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

观察者模式
Subject 和 Observer 直接绑定，中间无前言。如点击变乱，变乱直接和按钮进行绑定。
发布订阅模式
Publisher 和 Observer 相互不认识，中间有前言。如在 A 组件中绑定一个变乱，在 B 组件中触发这个变乱，这个两个组件相隔十万八千里互补认识，那么就通过中间event这个前言来通讯。
发布订阅模式须要在代码中触发 emit ，而观察者模式没有 emit
手写观察者模式

1. import React, { useState, useEffect } from 'react';
3. // 观察者函数
4. const observer = (newValue) => {
5.   console.log(`Subject changed to ${newValue}`);
6. };
7. const SubjectComponent = () => {
8.   // 使用useState创建一个状态变量
9.   const [subject, setSubject] = useState('Initial Value');
10.   // 使用useEffect来模拟观察者模式
11.   useEffect(() => {
12.     // 当subject变化时，调用观察者函数
13.     observer(subject);
14.   }, [subject]); // 依赖数组中包含subject，这样每当subject变化时，useEffect都会执行
15.   // 更新subject的方法
16.   const updateSubject = () => {
17.     setSubject('Updated Value');
18.   };
19.   return (
20.     <div>
21.       <p>Subject: {subject}</p>
22.       <button onClick={updateSubject}>Update Subject</button>
23.     </div>
24.   );
25. };
27. export default SubjectComponent;

复制代码

手写发布订阅模式

1. // EventBus.js
2. import { createContext, useContext, useState } from 'react';
4. const EventBusContext = createContext();
6. export const EventBusProvider = ({ children }) => {
7.   const [events, setEvents] = useState({});
9.   const subscribe = (eventName, callback) => {
10.     if (!events[eventName]) {
11.       setEvents((prevEvents) => ({
12.         ...prevEvents,
13.         [eventName]: [],
14.       }));
15.     }
16.     setEvents((prevEvents) => ({
17.       ...prevEvents,
18.       [eventName]: [...prevEvents[eventName], callback],
19.     }));
20.   };
22.   const publish = (eventName, data) => {
23.     if (events[eventName]) {
24.       events[eventName].forEach((callback) => callback(data));
25.     }
26.   };
28.   return (
29.     <EventBusContext.Provider value={{ subscribe, publish }}>
30.       {children}
31.     </EventBusContext.Provider>
32.   );
33. };
35. export const useEventBus = () => useContext(EventBusContext);

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。