Angular Redux中无关状态切片变更触发组件非预期重绘的解决方法

Angular Redux场景下，组件触发重渲染的核心逻辑和组件实际用到哪个状态切片没有直接绑定关系：只要组件订阅的状态流产生新推送，或是组件被纳入全局变更检测的执行范围，就会触发渲染流程。针对仅依赖X切片的组件A被无关的Y切片变更触发重绘的问题，可通过以下实操手段优化：

• 替换全量根状态订阅为细粒度切片订阅
  避免直接通过store.select(state => state)的方式订阅完整的根应用状态，这种写法会让任意切片的变更（哪怕是组件完全不相关的Y切片）都触发订阅流推送。

// *错误写法*：全量订阅根状态，任意切片变更都会触发更新
this.appState$ = this.store.select(appState => appState);
// *正确写法*：仅订阅X切片，Y切片的独立变更不会触发当前流的更新
this.xData$ = this.store.select(appState => appState.x);

• 使用记忆化选择器收敛状态推送
  结合Reselect创建带缓存能力的记忆化选择器，只有当选择器返回的实际值发生引用变化时，才会向下游订阅者推送更新，从机制上隔离无关切片变更带来的流推送：

// 基于X切片创建的记忆化选择器，仅X切片的实际值变化才会触发推送
const selectComponentARequiredData = createSelector(
  (rootState: AppState) => rootState.x,
  (xSlice) => xSlice.组件A实际渲染需要的属性
);

• 对组件启用OnPush变更检测策略
  为依赖X切片的组件配置ChangeDetectionStrategy.OnPush，从变更检测层面缩小触发范围：只有当组件的输入引用发生变化、组件内订阅的RxJS流推送新值、组件内绑定的原生事件触发时，才会执行组件的渲染检查，无关的Y切片变更链路如果没有影响到组件本身的触发条件，就不会触发重绘：

@Component({
  selector: 'app-component-a',
  changeDetection: ChangeDetectionStrategy.OnPush
})

• 为状态订阅流补全去重逻辑
  在组件的状态订阅管道中添加distinctUntilChanged操作符，对比前后两次推送的值是否完全一致，相同值直接跳过后续处理，避免相同状态值的重复推送带来的无意义重渲染：

this.xData$ = this.store.select(selectComponentARequiredData).pipe(
  // 对比前后值，值无变化时不推送下游
  distinctUntilChanged((prev, curr) => Object.is(prev, curr))
);

内容的提问来源于stack exchange，提问作者Hendrik Jan van Randen