观察者模式和发布订阅模式
观察者模式Subject 和 Observer 直接绑定，中间无前言。如点击变乱，变乱直接和按钮进行绑定。
发布订阅模式
Publisher 和 Observer 相互不认识，中间有前言。如在 A 组件中绑定一个变乱，在 B 组件中触发这个变乱，这个两个组件相隔十万八千里互补认识，那么就通过中间event这个前言来通讯。
发布订阅模式须要在代码中触发 emit ，而观察者模式没有 emit
手写观察者模式
import React, { useState, useEffect } from 'react';
// 观察者函数
const observer = (newValue) => {
console.log(`Subject changed to ${newValue}`);
};
const SubjectComponent = () => {
// 使用useState创建一个状态变量
const = useState('Initial Value');
// 使用useEffect来模拟观察者模式
useEffect(() => {
// 当subject变化时，调用观察者函数
observer(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;
手写发布订阅模式
// EventBus.js
import { createContext, useContext, useState } from 'react';
const EventBusContext = createContext();
export const EventBusProvider = ({ children }) => {
const = useState({});
const subscribe = (eventName, callback) => {
if (!events) {
setEvents((prevEvents) => ({
...prevEvents,
: [],
}));
}
setEvents((prevEvents) => ({
...prevEvents,
: [...prevEvents, callback],
}));
};
const publish = (eventName, data) => {
if (events) {
events.forEach((callback) => callback(data));
}
};
return (
<EventBusContext.Provider value={{ subscribe, publish }}>
{children}
</EventBusContext.Provider>
);
};
export const useEventBus = () => useContext(EventBusContext);
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]