NGXS懒选择器与动态选择器：适用场景及性能对比咨询

核心差异与适用场景 #

懒选择器（Lazy Selectors） #

• 工作机制：先基于依赖的状态片段生成一个闭包函数，再接收参数执行过滤或计算逻辑（对应示例中的animalOfType）。
• 优先选用场景：
  • 同一状态片段需要多次传入不同参数查询时：闭包会缓存依赖的状态，仅维持一次状态订阅，避免重复监听相同状态源带来的开销。
  • 组件内复用同一选择器逻辑处理多参数的场景：比如在一个组件中同时查询“猫”“狗”类型的动物，懒选择器只订阅一次ZooState.animals，不会生成多个独立监听实例。

动态选择器（Dynamic Selectors） #

• 工作机制：每次调用animalOfType_Alternative(type)时，都会创建全新的选择器实例，每个实例独立订阅依赖的状态（对应示例中的animalOfType_Alternative）。
• 优先选用场景：
  • 参数不固定且查询频率低的场景：比如单次查询某个特定类型的动物，动态选择器的创建开销可忽略不计。
  • 需要隔离选择器实例的场景：比如不同组件使用相同参数但需要独立的状态监听，动态选择器的独立实例不会互相干扰。

性能差异 #

• 懒选择器：
  • 优势：状态订阅次数更少，同一状态被多参数查询时，仅维持一个订阅，降低内存占用和状态变更时的触发计算次数。
  • 注意：首次生成闭包时有轻微初始化开销，但后续复用成本极低。
• 动态选择器：
  • 劣势：每次调用都会生成新选择器实例，每个实例独立订阅状态，频繁调用不同参数时，会产生多个重复的状态订阅，增加内存占用和状态变更时的计算量。
  • 优势：逻辑简单直接，无需处理闭包上下文问题，适合一次性或低频率查询场景。

代码示例对比 #

懒选择器实现 #

export class ZooStateQueries {
  @Selector([ZooState.animals])
  static animalOfType(animals: string[]) {
    return (type: string) => {
      return animals.filter(s => s.indexOf(type) > -1);
    };
  }
}

调用方式：this.store.select(ZooStateQueries.animalOfType).pipe(map(selectorFn => selectorFn('cat')))

动态选择器实现 #

export class ZooStateQueries {
  static animalOfType_Alternative(type: string) {
    return createSelector([ZooState.animals], (animals: string[]) => {
      return animals.filter(s => s.indexOf(type) > -1);
    });
  }
}

调用方式：this.store.select(ZooStateQueries.animalOfType_Alternative('cat'))

内容的提问来源于stack exchange，提问作者Sim-frpt