Angular中requestAnimationFrame触发变更检测的适用场景咨询

需要依赖 zone 监听 rAF 调用触发变更检测的常见场景 #

• Angular 官方动画模块逻辑
  @angular/animations 内部通过 requestAnimationFrame 调度所有帧动画，动画的 start/done 事件回调、动效过程中的状态同步如果涉及修改应用状态，默认会被 zone 捕获自动触发变更检测。禁用 rAF 补丁后，这类状态更新不会触发视图刷新，会出现状态与视图不同步的问题。
• 自定义 rAF 动效逻辑
  业务代码中手动调用 requestAnimationFrame 实现的平滑滚动、数字递变动效、拖拽位置同步等逻辑，如果回调中直接修改组件属性，禁用补丁后变更检测不会自动运行，视图不会同步更新。
• 第三方 Angular 组件的交互动效
  带滑动、渐变类动效的第三方 Angular 组件（比如滑块、日期选择器、图表组件、拖拽组件）大多依赖 rAF 实现流畅的动效调度，部分组件未手动处理变更检测，完全依赖 zone 的自动触发能力，禁用 rAF 补丁后会出现交互后视图无响应的问题。
• 异步 API 联动 rAF 的逻辑
  ResizeObserver、IntersectionObserver 等浏览器异步 API 的回调中如果嵌套调用 rAF 做布局调整、状态更新，这部分状态修改默认会被 zone 捕获触发变更检测，禁用补丁后更新会失效。

风险规避方案 #

如果只是为了解决第三方库触发多余变更检测的问题，优先选择非全局禁用的方案：将第三方库的初始化、调用逻辑包裹在 NgZone.runOutsideAngular() 中，仅让第三方库的 rAF 调用脱离 zone 管控，不会影响业务代码和官方组件的 rAF 正常能力，风险远低于全局禁用。
如果确定要使用全局配置 (window as any).__Zone_disable_requestAnimationFrame = true; 禁用 rAF 补丁，必须在配置代码上方添加显眼的注释说明规则，后续维护遇到 rAF 回调中状态更新不生效的问题，可通过两种方式兼容：

• 将状态更新逻辑包裹在 NgZone.run(() => { /* 状态修改代码 */ }) 中
• 注入 ChangeDetectorRef，状态修改后手动调用 detectChanges() 触发变更检测

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