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" />;
}