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 响应式底层用到了多个设计模式：

1. 观察者模式：用于状态和 UI 的同步。
2. 发布-订阅模式：用于事件系统和状态管理。
3. 代理模式：用于事件代理和 Fiber 调度。
4. 策略模式：用于 Diff 算法和状态更新策略。
5. 组合模式：用于组件树的组织。
6. 高阶组件模式：用于增强组件功能。

这些设计模式相互结合，使 React 具备高性能、灵活性和易扩展性，同时简化了开发者的工作。