代理模式 ​

参考：代理模式 | 代码酷

是什么 ​

代理模式（Proxy Pattern）是一种结构型模式：通过代理对象间接访问真实对象，在不改目标的前提下增加控制或副作用（懒加载、权限、缓存、日志等）。

思想：客户端 → 代理 → 真实对象。

常见类型 ​

• 虚拟代理：延迟创建昂贵资源，用到再初始化。
• 保护代理：按条件决定是否调用目标（权限校验）。
• 远程代理：代表远端对象（RPC 等）。
• 智能代理：调用前后做额外逻辑（统计、缓存）。

经典示例：延迟创建 ​

class RealImage {
  constructor(private url: string) {
    console.log('load', url);
  }
  display() {
    console.log('show', this.url);
  }
}

class ImageProxy {
  private real: RealImage | null = null;
  constructor(private url: string) {}
  display() {
    if (!this.real) this.real = new RealImage(this.url);
    this.real.display();
  }
}

在 React 中 ​

1. 代码分割：React.lazy + Suspense 在需要渲染时再加载组件，类似虚拟代理。
2. 权限门控：外层组件根据 user 决定是否渲染内层敏感 UI，相当于保护代理。
3. 性能：React.memo、useMemo 等是另一种「拦截更新」的手段，语义上与代理不同，但同属「间接控制行为」。

小结 ​

代理适合「访问前要加一层策略」的场景；在 React 里多表现为包装组件或懒加载边界，而不是处处手写 Proxy 类。