什么是 OnPush 变更检测策略？

推荐答案

OnPush 是 Angular 中的一种变更检测策略。它通过减少不必要的变更检测来提高应用程序的性能。当组件的输入属性没有发生变化时，Angular 不会对该组件及其子组件进行变更检测。

本题详细解读

什么是 OnPush 变更检测策略？

OnPush 变更检测策略是 Angular 提供的一种优化手段，用于减少不必要的变更检测操作。默认情况下，Angular 使用 Default 变更检测策略，这意味着每次有异步事件（如用户输入、定时器、HTTP 请求等）发生时，Angular 都会对整个组件树进行变更检测。

而使用 OnPush 策略时，Angular 只会在以下情况下对组件进行变更检测：

1. 输入属性发生变化：当组件的 @Input 属性发生变化时，Angular 会触发变更检测。
2. 组件内部触发事件：如果组件内部触发了事件（如点击事件），Angular 也会触发变更检测。
3. 手动触发变更检测：开发者可以通过调用 ChangeDetectorRef.detectChanges() 或 ChangeDetectorRef.markForCheck() 来手动触发变更检测。

如何使用 OnPush 策略？

要使用 OnPush 策略，需要在组件的 @Component 装饰器中设置 changeDetection 属性为 ChangeDetectionStrategy.OnPush：

// www.javascriptcn.com code example
import { Component, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ExampleComponent {
  // 组件逻辑
}

OnPush 策略的优势

• 性能提升：通过减少不必要的变更检测，OnPush 策略可以显著提高应用程序的性能，特别是在大型应用中。
• 更可控的变更检测：开发者可以更精确地控制何时进行变更检测，从而避免不必要的性能开销。

注意事项

• 不可变数据：使用 OnPush 策略时，建议使用不可变数据（如 Immutable.js 或通过 Object.assign 或 ... 操作符创建的新对象）来确保输入属性的变化能够被 Angular 检测到。
• 手动触发变更检测：在某些情况下，可能需要手动调用 ChangeDetectorRef 的方法来触发变更检测，特别是在使用异步数据流时。

通过合理使用 OnPush 策略，开发者可以在保证应用功能的同时，显著提升应用的性能。