优化的数据绑定机制在Angular2中如何工作 [英] How does optimised data binding mechanism work in Angular2

问题描述

我知道AngularJs中的数据绑定概念是一个天真的脏检查机制。在Google I / O视频中，他们表示，他们优化了Angular2中的数据绑定/更改检测。在Angular2中如何工作

解决方案

应用程序状态更改可能是由以下原因引起的：

• 事件，


• XHR - 获取数据


• 计时器 - setTimeout （），setInterval（）

它们都是异步的。

那么角度2知道，何时运行变化探测器？因为区域。你可以在这里阅读更多：

http://blog.thoughtram.io/angular/2016/02/01/zones-in-angular-2.html
http://blog.thoughtram.io/angular/2016/01/22/理解区域

区域具有生命周期事件。 ApplicationRef 正在侦听区域 onTurnDone 事件。每当这个事件被触发时，它执行一个 tick（）函数，开始更改检测。

角度2中的所有组件都有自己的更改检测器（因此它看起来像组件树 - 从上到下）。更改检测器正在比较变量引用，如果引用没有更改，CD会检查属性（如果变量是一个对象）。

有一个非常棒的文章：

http://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html

I know data binding concept in AngularJs is a naive dirty checking mechanism. In the Google I/O videos , they have said that, they optimized the data binding/change detection in Angular2. How does it work in Angular2

解决方案

Application state change can be caused by:

• Events,
• XHR - Fetching data,
• Timers - setTimeout(), setInterval()

They are all asynchronous.

So how Angular 2 know, when to run change detector? Because of Zones. There you can read more about it:

http://blog.thoughtram.io/angular/2016/02/01/zones-in-angular-2.html http://blog.thoughtram.io/angular/2016/01/22/understanding-zones.html

Zones have lifecycle events. ApplicationRef is listening zones onTurnDone event. Whenever this event is fired, it executes a tick() function which start change detection.

All components in Angular 2 have their own Change Detector (so it looks like component tree - from top to bottom). Change Detector is comparing variables references and if references do not changed, CD checks properties (if variable is an object).

There is really awesome article about that:

http://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html

这篇关于优化的数据绑定机制在Angular2中如何工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！