ng zone

發表於 2022-03-10 更新於 2024-10-23 分類於 frontend ， Angular Disqus：文章字數： 470 所需閱讀時間 ≈ 2 分鐘

how zone support ng change detection

背景

众所周知, change detect要解决的事情，就是数据变化触发视图变化，而最常见的两个问题是如何探测变化，和如何减少不必要的更新

vue用修改getter/setter或proxy的方式来完成依赖收集和变化通知，使用lazy watcher来减少更新

svelte 采用编译时更改代码的行为, 避免检测

react 采用setState函数调用和队列控制批量更新

那ng呢

ng: 什么时候会有视图更新

zone.js 能够维持运行时上下文, zone有生命周期钩子, 且Monkey-patched了一些方法(setInterval,alert,prompt,addEventListener,removeEventListener)

NgZone, 提供 run(callback)/runOutsideAngular(callback), 分别用于当三方api中的异步回调想要修改内容时触发检查，和普通的操作中希望避开检查

你还可以设置 ChangeDetectionStrategy.OnPush, 手动触发更新检查

你也可以动态的通过ChangeDetectorRef进行检查的启用和停用

甚至你可以通过 module 中 { ngZone : 'noop'} 去一定层级禁用它，然后自己实现响应式都可以

而react是把数据与视图绑定的叫做state,没绑定的叫做ref

以渲染10000个可以draggle的svg作为例子, 通过cdr并不能完全避免检测，因为你的mouse move也会触发检测，只是没有变化发生而已

而通过在mouseDown中的runOutsideAngular中给mousemove绑定，就可以实现mouse move 也不触发检测, 再在mouseUp中移除监听，并且通过this.zone.run触发更新检测

而对于多个异步的调用过程，在zone的加持下也容易看到调用的“栈结构”