策略模式

是什么

策略模式（Strategy Pattern）是一种行为型设计模式：把一组可互换的算法或行为封装成独立单元，在运行时按需选用，而不用改调用方代码。

核心是把「做什么」和「怎么做」拆开：调用方只依赖抽象策略接口，具体实现可随时替换或扩展。

结构

策略接口：约定所有策略必须实现的方法（如 sort、validate）。
具体策略：各自实现该接口。
上下文（Context）：持有当前策略，把请求委托给策略执行。

TypeScript 示例：排序

interface SortStrategy {
  sort(array: number[]): number[];
}

class BubbleSortStrategy implements SortStrategy {
  sort(array: number[]): number[] {
    return array.slice().sort((a, b) => a - b);
  }
}

class QuickSortStrategy implements SortStrategy {
  sort(array: number[]): number[] {
    return array.slice().sort((a, b) => a - b);
  }
}

class Sorter {
  private strategy: SortStrategy;

  constructor(strategy: SortStrategy) {
    this.strategy = strategy;
  }

  setStrategy(strategy: SortStrategy) {
    this.strategy = strategy;
  }

  sort(array: number[]): number[] {
    return this.strategy.sort(array);
  }
}

在 React 中的思路

不必强行用「类」，可以用同一套 props 或函数表达策略：

表单校验：validators: Record<string, (v: string) => string | undefined>。
列表展示：renderItem 或 variant 映射到不同子组件。

若用类式策略，可定义 render(): ReactNode，由容器组件只负责 strategy.render()，与经典 Context 一致。

适用与注意

适合：分支多、且每支都是完整「算法」或流程（支付渠道、折扣规则、导出格式等）。
注意：策略数量爆炸时考虑注册表 + 配置，或组合更小粒度的函数。

策略模式 ​

是什么 ​

结构 ​

TypeScript 示例：排序 ​

在 React 中的思路 ​

适用与注意 ​

策略模式

是什么

结构

TypeScript 示例：排序

在 React 中的思路

适用与注意