Angular中哪些场景需要使用Onpush？-51CTO.COM

在Angular中，OnPush变更检测策略可以提高应用性能，因为它只会在输入属性（@Input）发生变化或者组件内部的事件触发时才进行变更检测。以下是一些适合使用 OnPush 策略的场景：

1. 组件只依赖输入属性

如果你的组件只依赖于输入属性（@Input）来决定其显示内容，并且不依赖于外部的任何全局状态或者服务的变化，那么可以使用 OnPush 策略。

@Component({
  selector: 'app-my-component',
  template: `<p>{{ data }}</p>`,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class MyComponent {
  @Input() data: string;
}

2. 不需要频繁更新的组件

对于那些不需要频繁更新显示内容的组件，比如静态内容展示的组件，使用 OnPush 可以避免不必要的变更检测。

3. 数据不可变的场景

在使用不可变数据结构（immutable data structures）时，数据变化会创建新的对象引用，这样 OnPush 策略能够有效地检测到变化。

@Component({
  selector: 'app-list',
  template: `
    <ul>
      <li *ngFor="let item of items">{{ item }}</li>
    </ul>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ListComponent {
  @Input() items: string[];
}

4. 子组件只依赖父组件的输入

如果一个子组件的状态完全由其父组件的输入决定，并且不会通过服务或外部状态改变，可以使用 OnPush。

5. 性能优化需求

在大型应用中，如果某些组件的变更检测开销较大，可以考虑使用 OnPush 以减少变更检测的频率，提高性能。

如何使用 OnPush

在组件的装饰器中设置 changeDetection 为 ChangeDetectionStrategy.OnPush：

import { Component, Input, ChangeDetectionStrategy } from '@angular/core';


@Component({
  selector: 'app-my-component',
  template: `<p>{{ data }}</p>`,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class MyComponent {
  @Input() data: string;
}

注意事项

确保数据不可变：使用 OnPush 时，确保传递给组件的数据是不可变的。如果数据发生改变，应该创建新的对象而不是修改现有对象。

事件驱动变更：对于需要更新的场景，通过事件驱动（例如按钮点击）来触发变更检测。

服务变更检测：如果组件依赖于服务的数据，确保服务数据的变化能通知组件。例如，通过 Observable 和 Subject 来处理数据的变化。

通过在适当的场景中使用 OnPush 策略，可以有效地提升Angular应用的性能，减少不必要的变更检测，提高应用的响应速度。