NgRx中三种select函数调用方式的差异解析

以下是三种调用方式的核心区别：

• 方式1：this.store.select(selectValues)

  • 这是NgRx Store类提供的快捷方法，内部已封装RxJS管道逻辑，语法最简洁。
  • 原生支持选择器的**记忆化（memoization）**特性：只有当选择器依赖的状态片段发生变化时，才会触发新值发射，避免无效计算。
  • 是NgRx官方推荐的常规用法。

• 方式2：this.store.pipe(select(selectValues))

  • 这里的select是NgRx提供的RxJS操作符，需配合pipe链式调用。
  • 核心逻辑和方式1完全一致，同样会启用选择器的记忆化优化，只是写法更符合RxJS的管道式编程风格。
  • 适合需要在选择数据前后串联其他RxJS操作符（如filter、debounceTime）的场景。

• 方式3：this.store.pipe(map(state => selectValues(state)))

  • 直接用RxJS原生map操作符手动调用选择器，是三者中差异最大的写法。
  • 完全绕过选择器的记忆化优化：只要Store状态有任何变化，无论选择器依赖的状态是否改变，都会执行selectValues(state)计算，即使结果和上一次相同，也会发射新值。
  • 会引发不必要的计算和组件重渲染，非特殊需求不建议使用。

内容的提问来源于stack exchange，提问作者wonderful world