Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[angular] 第1869天 请说说在Angular中是如何进行脏检查的? #5831

Open
haizhilin2013 opened this issue May 27, 2024 · 1 comment
Labels
angular angular

Comments

@haizhilin2013
Copy link
Collaborator

第1869天 请说说在Angular中是如何进行脏检查的?

3+1官网

我也要出题

@haizhilin2013 haizhilin2013 added the angular angular label May 27, 2024
@llccing
Copy link

llccing commented Jul 3, 2024

AngularJS(1.x)中的脏检查

在AngularJS(1.x)中,脏检查(Dirty Checking)是变更检测的主要机制。AngularJS通过一个称为“digest cycle”(消化周期)的过程来实现脏检查。每当有数据可能发生变化时(例如,用户输入、HTTP请求等),AngularJS会启动消化周期,遍历所有的$scope,检查每个数据绑定是否发生了变化。如果检测到变化,AngularJS会继续执行直到所有数据稳定为止。

Angular(2+)中的变更检测

在Angular 2及之后的版本中,变更检测机制得到了重大的改进,不再依赖传统的脏检查。Angular 2+ 使用了一种更高效的变更检测机制,结合了以下几种技术:

  1. Zone.js:Angular利用Zone.js来捕获异步事件。当这些事件(如用户交互、HTTP请求、定时器等)完成时,Zone.js会触发变更检测。

  2. Change Detection Strategy:Angular提供了两种变更检测策略,开发者可以选择使用:

    • Default:默认策略,遍历整个组件树进行检测。
    • OnPush:仅在输入属性发生变化或显式调用markForCheck()时进行检测,适用于纯函数组件或数据变化较少的组件,能显著提升性能。
  3. Incremental DOM:Angular的视图更新机制使用增量DOM技术,只更新发生变化的部分,而不是重新渲染整个视图。

  4. RxJS和Observable:Angular充分利用RxJS和Observable来处理异步数据流,有效减少不必要的变更检测。

总结

  • AngularJS(1.x):主要依赖脏检查,通过消化周期进行数据绑定的变化检测。
  • Angular(2+):采用了更高效的变更检测机制,不再使用传统的脏检查术语,而是通过Zone.js、不同的变更检测策略、增量DOM和RxJS等技术来实现数据变化的检测和视图更新。

因此,在Angular 2及其后续版本中,“脏检查”这个词已经不再被使用,因为变更检测机制已经进行了优化和改进,不再依赖于脏检查的方式。

变更检测详细见这里 #5835

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
angular angular
Projects
None yet
Development

No branches or pull requests

2 participants