Angular变更检测：是否需应用于所有组件的技术疑问

Great question! Let's break this down to understand when full change detection is necessary, and when we can optimize it.

Default Behavior: Change Detection for All Components #

By default, Angular enables change detection for every component in your application. This is because Angular doesn't know upfront which components will have state changes—so it plays it safe by checking every component in the tree whenever a trigger (like a user click, HTTP response, or timer) occurs. In your example, clicking the "Change" button triggers a state update, and Angular checks all components (including your MyApp component) to update the DOM.

When You Don't Need Change Detection for a Component #

There are scenarios where applying change detection to a component is unnecessary and even wasteful for performance:

• Pure presentational components: Components that only receive data via @Input() and never modify their internal state, and the input data is immutable (e.g., primitive values or objects that are replaced instead of mutated).
• Static components: Components that render fixed UI that never changes (like a static footer or logo).

How to Optimize: Skip Unnecessary Change Detection #

Angular provides two main ways to avoid running change detection on components that don't need it:

1. Use ChangeDetectionStrategy.OnPush #

This is the most common optimization. When you set a component's change detection strategy to OnPush, Angular will only run change detection for that component if:

• One of its @Input() properties has a reference change (not just a value mutation for objects/arrays).
• An event is triggered inside the component (like a button click, form submission, or keyboard event).
• You manually trigger change detection via ChangeDetectorRef.

Here's an example of a component using OnPush:

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

@Component({
  selector: 'app-item-display',
  template: `<h2>{{itemName}}</h2>`,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ItemDisplayComponent {
  @Input() itemName: string;
}

In your original MyApp component, when you update this.item = 'bread', the itemName input to ItemDisplayComponent gets a new reference (since strings are primitives), so Angular will run change detection on ItemDisplayComponent—but only when this input changes, not on every global change detection cycle.

2. Detach the Change Detector #

For components that truly never need to update (like static UI), you can completely detach the component from the change detection tree using ChangeDetectorRef.detach():

import { Component, ChangeDetectorRef, OnInit } from '@angular/core';

@Component({
  selector: 'app-static-logo',
  template: `<img src="/assets/logo.png" alt="Logo">`
})
export class StaticLogoComponent implements OnInit {
  constructor(private cdr: ChangeDetectorRef) {}

  ngOnInit() {
    this.cdr.detach(); // Stop change detection for this component entirely
  }
}

If you ever need to update this component later, you can call this.cdr.detectChanges() to run a one-time check, or this.cdr.reattach() to re-enable regular change detection.

Final Takeaway #

Change detection does NOT need to be applied to all components. For most applications, using OnPush for presentational components is a great way to reduce unnecessary CPU work, especially in large apps with many components. Only components that have internal state changes or rely on mutable input data need the default change detection strategy.

内容的提问来源于stack exchange，提问作者Unknown developer