React中用到的Javascript设计模式详解
以下是对 React 响应式底层使用的设计模式的更加详细说明，并提供简单的代码示例，展示这些模式在 React 中的实现方式。
1. 观察者模式（Observer Pattern）
定义
观察者模式用于建立一对多的依赖关系，当对象状态发生变化时，所有依赖的观察者会被自动通知。
在 React 中的实现
React 的状态管理和组件更新使用了观察者模式。组件的 state 变化会触发依赖于该状态的 UI 更新。
代码示例
class Observable {
constructor() {
this.subscribers = []; // 订阅者列表
}
subscribe(observer) {
this.subscribers.push(observer); // 添加订阅者
}
notify(data) {
this.subscribers.forEach((observer) => observer(data)); // 通知所有订阅者
}
}
// React 组件模拟
const state = new Observable();
function App() {
const [count, setCount] = React.useState(0);
React.useEffect(() => {
state.subscribe((newCount) => {
setCount(newCount); // 当状态变化时更新 UI
});
}, []);
return (
<button onClick={() => state.notify(count + 1)}>Count: {count}</button>
);
}
2. 发布-订阅模式（Publish-Subscribe Pattern）
定义
发布-订阅模式通过中间代理（如事件总线）解耦发布者和订阅者，发布者通过中介通知订阅者。
在 React 中的实现
React 的事件系统和 Redux 都使用了发布-订阅模式。例如，Redux 中的 dispatch 通知所有订阅者。
代码示例
// 简单的事件总线实现
class EventBus {
constructor() {
this.events = {};
}
subscribe(event, callback) {
if (!this.events[event]) {
this.events[event] = [];
}
this.events[event].push(callback);
}
publish(event, data) {
if (this.events[event]) {
this.events[event].forEach((callback) => callback(data));
}
}
}
const eventBus = new EventBus();
function Publisher() {
return (
<button onClick={() => eventBus.publish("increment", 1)}>
Publish Event
</button>
);
}
function Subscriber() {
const [count, setCount] = React.useState(0);
React.useEffect(() => {
eventBus.subscribe("increment", (data) => setCount((c) => c + data));
}, []);
return <div>Count: {count}</div>;
}
function App() {
return (
<div>
<Publisher />
<Subscriber />
</div>
);
}
3. 代理模式（Proxy Pattern）
定义
代理模式为对象提供一个代理，以控制对对象的访问或增加功能。
在 React 中的实现
React 的事件代理（如合成事件）和 Fiber 是代理模式的应用，代理真实 DOM 和任务调度。
代码示例
// 自定义代理函数
const createProxy = (target) => {
return new Proxy(target, {
get(obj, prop) {
console.log(`Accessing property ${prop}`);
return obj[prop];
},
set(obj, prop, value) {
console.log(`Setting property ${prop} to ${value}`);
obj[prop] = value;
return true;
},
});
};
const state = createProxy({ count: 0 });
function App() {
const [count, setCount] = React.useState(state.count);
function increment() {
state.count += 1; // 更新代理对象
setCount(state.count); // 触发 UI 更新
}
return <button onClick={increment}>Count: {count}</button>;
}
4. 策略模式（Strategy Pattern）
定义
策略模式定义一系列算法，将它们封装起来并使它们可以互换。
在 React 中的实现
React 的 Diff 算法使用策略模式，根据节点的类型选择不同的更新策略。
代码示例
// 策略模式实现
const strategies = {
text: (node, value) => (node.textContent = value),
style: (node, value) => Object.assign(node.style, value),
};
function applyUpdate(node, type, value) {
if (strategies[type]) {
strategies[type](node, value); // 根据类型选择策略
}
}
// 示例应用
const node = document.createElement("div");
applyUpdate(node, "text", "Hello World");
applyUpdate(node, "style", { color: "red", fontSize: "20px" });
console.log(node); // <div style="color: red; font-size: 20px;">Hello World</div>
5. 组合模式（Composite Pattern）
定义
组合模式将对象组合成树形结构，用来表示“整体-部分”的层次关系。
在 React 中的实现
React 组件树的设计就是组合模式的体现，每个组件可以包含子组件。
代码示例
function App() {
return (
<div>
<Header />
<Main>
<Sidebar />
<Content />
</Main>
<Footer />
</div>
);
}
function Header() {
return <header>Header</header>;
}
function Main({ children }) {
return <main>{children}</main>;
}
function Sidebar() {
return <aside>Sidebar</aside>;
}
function Content() {
return <section>Content</section>;
}
function Footer() {
return <footer>Footer</footer>;
}
6. 高阶组件模式（HOC，Higher-Order Component）
定义
高阶组件是一个函数，接受组件作为参数并返回一个增强的组件。
在 React 中的实现
高阶组件用于为现有组件添加功能，例如权限控制、日志记录等。
代码示例
function withLogger(WrappedComponent) {
return function EnhancedComponent(props) {
console.log("Props received:", props);
return <WrappedComponent {...props} />;
};
}
function Button({ label }) {
return <button>{label}</button>;
}
const EnhancedButton = withLogger(Button);
function App() {
return <EnhancedButton label="Click Me" />;
}
总结
React 响应式底层用到了多个设计模式：
- 观察者模式：用于状态和 UI 的同步。
- 发布-订阅模式：用于事件系统和状态管理。
- 代理模式：用于事件代理和 Fiber 调度。
- 策略模式：用于 Diff 算法和状态更新策略。
- 组合模式：用于组件树的组织。
- 高阶组件模式：用于增强组件功能。
这些设计模式相互结合，使 React 具备高性能、灵活性和易扩展性，同时简化了开发者的工作。
原文地址：https://blog.csdn.net/m0_55049655/article/details/145227430
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！