fe-interview icon indicating copy to clipboard operation
fe-interview copied to clipboard

Published 20 hours ago • verified publisher icon haizlin

[angular] 第1873天 请说说在Angular中的摘要循环过程是什么？

Open haizhilin2013 opened this issue 1 year ago • 2 comments
trafficstars

第1873天 请说说在Angular中的摘要循环过程是什么？

3+1官网

我也要出题

haizhilin2013 avatar May 31 '24 20:05 haizhilin2013

在Angular框架中，摘要循环（digest cycle）是Angular变更检测机制的一部分，用于确保模型和视图之间的同步。摘要循环是AngularJS（Angular 1.x）中的一个核心概念，但在Angular（Angular 2+）中则有所不同。以下分别介绍在AngularJS和Angular中的摘要循环过程。

AngularJS（Angular 1.x）中的摘要循环

  1. 触发事件：

    • 用户交互（如点击按钮、输入数据）、HTTP响应、定时器（如$timeout和$interval）等都可以触发摘要循环。

  2. 脏检查（Dirty Checking）：

    • AngularJS使用脏检查机制来检测数据模型的变化。它会检查作用域中的每一个监视器（watcher），比较当前值和前一个值。如果有变化，则触发相应的回调函数。

  3. 执行摘要循环：

    • 摘要循环会运行多次（通常最多10次），以确保所有的变化都被捕获和处理。如果在10次循环后数据仍在变化，AngularJS会抛出一个异常，防止无限循环。

  4. 更新DOM：

    • 当所有变化都被捕获后，AngularJS会更新视图（DOM），以反映模型的最新状态。

Angular（Angular 2+）中的变更检测

Angular 2+中不再使用摘要循环，而是采用了基于区域（zones）的变更检测机制，主要通过NgZone和ChangeDetectorRef来管理变更检测。

  1. 触发变更检测：

    • 在Angular应用中，任何异步事件（如HTTP请求、用户输入、定时器等）都会触发变更检测。

  2. Zone.js：

    • Angular使用Zone.js来拦截异步事件。当这些事件发生时，Zone.js会通知Angular进行变更检测。

  3. 变更检测策略：

    • 默认情况下，Angular会自动检测整个组件树中的变化。这种策略被称为Default策略。
    • 开发者可以选择OnPush策略，这种策略只有在输入属性（@Input）发生变化时才会触发变更检测，以提高性能。

  4. ChangeDetectorRef：

    • 开发者可以通过ChangeDetectorRef手动触发或控制变更检测，例如调用markForCheck、detectChanges等方法。

  5. 变更检测的过程：

    • Angular会从应用的根组件开始，递归检测每个子组件，检查数据模型的变化，并更新视图。

  6. 生命周期钩子：

    • 在变更检测过程中，Angular会调用组件的生命周期钩子（如ngOnInit、ngDoCheck、ngAfterViewInit等）来执行相关逻辑。

总结

  • 在AngularJS中，摘要循环是通过脏检查机制来检测数据模型的变化，并更新视图。
  • 在Angular 2+中，变更检测是通过Zone.js和变更检测策略来管理的，提供了更高效和灵活的变更检测机制。

通过了解这些变更检测机制，可以帮助开发者更好地优化Angular应用的性能和响应速度。

llccing avatar Jul 03 '24 08:07 llccing

在Angular 2+中，变更检测（Change Detection）是一个核心机制，用于确保视图与模型数据保持同步。Angular使用一种称为“脏值检测”的机制来实现这一点，但与AngularJS不同，它更高效且灵活。以下是对Angular 2+变更检测的详细说明：

1. Zone.js和NgZone

  • Zone.js：

    • Zone.js是一个用于拦截和处理异步操作的库。Angular使用Zone.js来自动检测任何异步事件（如HTTP请求、用户输入、定时器等），并在事件完成后触发变更检测。
    • 当Zone.js检测到异步操作时，它会通知Angular进行变更检测，确保数据的变化能够及时反映到视图中。

  • NgZone：

    • NgZone是Angular对Zone.js的一个封装，提供了更细粒度的控制。开发者可以使用NgZone来手动触发或控制变更检测。例如，可以使用run方法在Angular Zone内执行操作，或使用runOutsideAngular方法在Angular Zone外执行操作以避免不必要的变更检测。

2. 变更检测策略

Angular提供了两种主要的变更检测策略：

  • Default（默认）策略：

    • 默认情况下，Angular会检测整个组件树的变化。每当有异步事件发生时，Angular会从根组件开始递归检查所有子组件，更新视图。这种策略保证了视图的完整性，但在复杂的应用中可能会影响性能。

  • OnPush策略：

    • 当组件使用OnPush策略时，Angular只会在以下情况下进行变更检测：
      • 组件的输入属性（@Input）发生变化。
      • 组件内部触发事件（如按钮点击）。
      • 调用ChangeDetectorRef的相关方法（如markForCheck、detectChanges）。
    • 这种策略通过减少不必要的变更检测，显著提高性能，适用于数据相对稳定或变化频率较低的场景。

3. ChangeDetectorRef

ChangeDetectorRef是Angular提供的一个类，允许开发者手动控制变更检测。主要方法包括：

  • markForCheck：

    • 标记当前组件及其祖先组件为需要检查。在下一个变更检测周期中，这些组件会被重新检查。

  • detectChanges：

    • 立即触发变更检测，只检查当前组件及其子组件，不影响其他组件。

  • detach：

    • 从变更检测树中分离当前组件及其子组件，不再进行自动变更检测。适用于需要完全手动控制变更检测的场景。

  • reattach：

    • 将先前分离的组件重新附加到变更检测树，恢复自动变更检测。

4. 生命周期钩子

在变更检测过程中，Angular会调用组件的生命周期钩子。主要包括：

  • ngOnInit：

    • 在组件初始化时调用，用于执行初始的设置或数据加载操作。

  • ngDoCheck：

    • 在每个变更检测周期中调用，允许开发者自定义检测逻辑。

  • ngAfterViewInit：

    • 在组件视图初始化完成后调用，用于执行视图相关的操作。

  • ngOnDestroy：

    • 在组件销毁之前调用，用于清理资源和取消订阅。

5. 变更检测的过程

  1. 事件触发：

    • 当用户交互、HTTP响应、定时器等异步事件发生时，Zone.js会拦截这些事件，并通知Angular进行变更检测。

  2. 检查根组件：

    • Angular从应用的根组件开始，递归地检查每个子组件，判断其数据模型是否发生变化。

  3. 更新视图：

    • 如果检测到数据变化，Angular会更新对应的视图，以确保视图和数据模型保持同步。

  4. 触发生命周期钩子：

    • 在变更检测过程中，Angular会调用相关的生命周期钩子，允许开发者执行自定义逻辑。

总结

Angular 2+中的变更检测机制通过Zone.js和NgZone自动管理异步操作，并提供了灵活的变更检测策略和手动控制方法（ChangeDetectorRef），使得变更检测过程更加高效和可控。理解和善用这些机制，可以帮助开发者优化Angular应用的性能和响应速度。

llccing avatar Jul 03 '24 08:07 llccing