javascript - Angular 中的变更检测 API 底层架构

Question

我在阅读这篇文章时对更改检测操作的工作原理感到困惑。 https://vsavkin.com/change-detection-in-angular-2-4f216b855d4c

概念:

Angular 表示它不进行脏检查，并且没有像 AngularJS 1.X 中那样的两个绑定(bind)和监视。然而，我从 Docs 和一些博客 + 堆栈中了解到，每个组件都有一个变化检测器。

然而，从这个堆栈溢出@Gunter 的响应在这里:Understanding change detection in angular 2

With ChangeDetectionStrategy.OnPush Angular runs change detection, when in @Input() was updated, a DOM event Angular listens to was received, or the async pipe (| async) received a new value.

我知道它有一个监听器，它监听 Angular 每一个变化。其次，如果我使用 runOutsideAngular，它不会在该组件或操作上创建变化检测器对象吗？

Other cases are if you explicitly (this.zone.runOutsideAngular()) or for some other reasons code runs outside Angulars zone modifies the status of the component, this also won't be covered (even when the code is an event handler).

变化检测器生命周期的小子问题:

问题一:是观察者还是事件监听者？

问题 2:这是否意味着无论我们使用 changeDetectorStartegy.onPush 还是 .Default，每个组件都有一个事件的变化检测器对象？

问题 3:如果我在 Angular 应用程序中有 1000 个组件对象，那么这些变化检测器对象对每个组件实现有什么影响？特别是对于应用程序的内存配置文件

问题 4:如何管理它，使其不影响浏览器中应用程序的内存配置文件

问题 5:是否有一个地方/资源可以让我获得变化检测器和 ngZone 关联的生命周期？

Update: Request someone that rather than marking this question forclose I would recommend answering a serious question. I appreciateyour help understanding underlying working concepts.

Answer 1

这是一个相当广泛的问题 - 这两篇文章应该能让您很好地理解:

• > Angular’s $digest is reborn in the newer version of Angular
• > Everything you need to know about change detection in Angular

Question 1: Is it that there is an observer or is it an event listener?

Question 2: Does it mean that there is an active change detector object for every component whether we use changeDetectorStartegy.onPush or .Defau

不，变化检测器不是监听器。 Angular 中的每个组件都表示为一个 View 。因此，应用程序是一棵 View 树。当您在组件中注入(inject) ChangeDetectorRef 时，您实际上是在围绕该 View 注入(inject)一个包装器。每个 View 都有一个状态，该状态指示是否应检查此 View 上的绑定(bind)。 OnPush 只是将此状态设置为 disabled，因此不会对 View /组件执行任何检查。如果绑定(bind)发生变化，那么 Angular 会将状态设置为 CheckOnce，以便在下一次绑定(bind)发生变化之前只检查一次 View 。

Question 3: What is the impact of these change detector objects in each component implementation if I have 1000 component objects within Angular application? Especially for the memory profile of the application

Question 4: How do I manage it so that it does not impact the memory profile of the application in the browser

正如我上面所解释的，没有独立的变化检测器这样的东西。它是 View 的包装器。 View 无论如何都存在，因为它是 Angular 在底层表示组件树的方式。

Is there a place/resource where I can get the lifecycle of the change detector and ngZone associated?

变化检测器没有生命周期这样的东西。