第4章 变更检测机制面试：Zone.js、OnPush策略、脏检查优化、Immutable数据
Angular变更检测是高性能组件库的基石。面试官通常从Zone.js原理切入，考察你对脏检查触发时机、OnPush策略下渲染优化以及Immutable数据三者协同的理解。本章结构化梳理核心问题，帮你建立“原理 → 策略 → 编码实践”的完整回答链路。
| 机制 | 触发方式 | 性能影响 | 适用场景 |
|---|---|---|---|
| Zone.js 默认 | 任何异步事件（setTimeout、Promise、DOM事件） | 全组件树遍历，可能过度渲染 | 中小型应用，快速开发 |
| OnPush 策略 | @Input 引用变化 / 组件内触发变更检测 | 仅检查子树，显著减少遍历 | 组件库、大型列表、性能敏感组件 |
| OnPush + Immutable | Immutable 保证输入新引用时触发 | 精确控制，零浪费 | 复杂状态管理、高性能表格、图表 |
📌 面试问题 1：Zone.js 如何实现变更检测？什么情况下会触发脏检查？
面试官考察点：理解 Zone.js 拦截异步任务的机制，以及 Angular 如何通过 monkey-patch 实现自动变更检测。
- Zone.js 覆盖浏览器异步 API（setTimeout、addEventListener 等）
- 每次异步操作完成后通知 Angular applicationRef.tick()
- 从根组件开始深度遍历组件树，检查每个组件的表达式
- 配合 ChangeDetectorRef.detectChanges() 手动控制
简短示例回答：Zone.js 通过 monkey-patch 重写了浏览器异步方法，拦截 setTimeout、Promise 等。当异步回调执行完成后，Zone 触发 Angular 的 tick()，Angular 从根组件向下遍历并对比 __ngContext 中的表达式值，发现差异则更新 DOM。配合 OnPush 可跳过不必要分支。
🔍 可能追问：Zone.js 如何 patch 微任务和宏任务？NgZone.runOutsideAngular 的作用？
📌 面试问题 2：OnPush 策略的原理是什么？哪些场景下必须使用 OnPush？
面试官考察点：掌握 ChangeDetectionStrategy.OnPush 的触发条件，理解引用相等性检查与 Immutable 的关系。
- OnPush 改变组件检查策略：仅当 @Input 引用变化（===）或组件内手动触发时检查
- 引用不变则跳过整个子树，减少遍历
- 适用于：数据流单向、输入对象不可变、列表渲染、弹窗等
- 必须配合 Immutable 数据或手动 MarkForCheck 使用
简短示例回答：OnPush 策略让组件只检查输入对象引用是否改变——如果父组件传递的对象不变，子组件树不执行脏检查。例如 ngFor 中的列表项，使用 Immutable 更新数组（如 [...old, new]）保证引用变化，避免大量子组件重渲染。
🔍 可能追问：OnPush 下如何触发变更检测？MarkForCheck 和 detectChanges 的区别？
📌 面试问题 3：脏检查优化与 Immutable 数据如何配合？你在项目中如何避免性能瓶颈？
面试官考察点：评估真实项目中的性能调优能力，理解不可变数据对引用检查的益处。
- 脏检查本质是深度比较，Immutable 数据将“值比较”变为“引用比较”
- 使用
[...spread]、Object.assign或 Immutable.js 创建新对象 - 配合 OnPush 策略，仅当引用变化时触发变更检测
- 对高频更新的组件（如实时数据表格）使用 trackBy 函数进一步优化
简短示例回答：在组件库表格组件中，数据变更被包装为 Immutable：每次更新 this.data = [...this.data, newRow]，使输入引用变化。OnPush 策略下仅新数据触发脏检查，旧行组件不重检。同时用 trackBy 标识每行 ID，避免整个列表重建。
🔍 可能追问：Immutable.js 与原生 spread 比较的优劣？如何在不使用库时保证引用变化？