Angular中哪些场景不建议使用ChangeDetectionStrategy.OnPush

不推荐使用 ChangeDetectionStrategy.OnPush 的场景 #

• 小型、逻辑简单的演示类/内部工具类应用：本身变更检测压力极小，引入OnPush反而会增加额外的状态管理心智负担，投入产出比极低
• 组件内部存在大量非响应式的可变状态修改：比如频繁直接修改类属性、没有通过RxJS流或者Immutable数据更新的场景，使用OnPush很容易出现视图不更新的BUG，排查成本很高
• 重度依赖第三方非Angular友好的UI组件/库：很多第三方库不会主动触发Angular变更检测，也不对外暴露状态变更的可观察接口，接入OnPush后会出现大量视图更新异常问题，适配成本极高
• 快速迭代的MVP版本项目：团队成员对OnPush机制不熟悉的前提下，引入会拖慢需求迭代速度，建议等产品逻辑稳定后再逐步开启优化

Ionic Angular 响应式项目适配OnPush的核心性能优化关键词 #

• ChangeDetectionStrategy.OnPush：配合RxJS的async管道自动触发变更检测，不需要手动处理状态更新后的视图刷新
• Immutable 数据结构：所有状态更新都返回新的引用，OnPush模式下可以通过@Input()输入属性的引用变化自动触发变更检测
• trackBy 函数：优化*ngFor列表渲染，避免列表数据更新时全量重渲染DOM，在长列表场景下收益极高
• 纯管道（Pure Pipe）：替代组件类中的方法调用做数据转换，纯管道只有在输入参数引用变化时才会重新计算，性能远高于模板中的方法调用
• async 管道：自动订阅RxJS流、自动销毁订阅，同时会自动触发OnPush组件的变更检测，不需要手动管理订阅生命周期
• @ngrx/component-store / @ngrx/store：响应式状态管理方案，所有状态变更都通过流输出，完美适配OnPush模式
• detectChanges() / markForCheck()：特殊场景下手动触发变更检测的API，仅在确实无法通过响应式流更新视图时按需使用
• Ionic 虚拟滚动（Virtual Scroll）：长列表场景下仅渲染可视区域内的DOM节点，大幅降低大列表场景下的内存占用和渲染压力
• 生产环境构建：开启enableProdMode()，关闭Angular开发模式下的双重变更检测，直接提升运行性能
• NgOptimizedImage：Angular官方图片优化指令，自动实现图片懒加载、格式转换、尺寸适配，降低资源加载时间

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