Angular 的变更检测如何工作，OnPush 有什么作用？

Question

Accepted Answer

**Change detection** 是 Angular 保持 DOM 与组件数据同步的方式 — 在任何可能改变状态的事件之后，它检查组件并在数据改变的地方更新视图。默认情况下这种检查范围很广；**`OnPush`** 为性能而缩小检查范围。

## 默认变更检测如何工作

```text
An async event fires (click, HTTP response, setTimeout) →
Zone.js notifies Angular → Angular checks the ENTIRE component tree
top-to-bottom → updates any bindings whose values changed.
```

默认情况下（`Default` 策略），Angular 在每个事件上都重新检查**每个组件** — 正确，但在大型树中可能浪费资源。

## OnPush — 跳过无法改变的组件

```ts
import { ChangeDetectionStrategy, Component } from "@angular/core";

@Component({
  selector: "app-user",
  changeDetection: ChangeDetectionStrategy.OnPush, // opt in
  template: `{{ user.name }}`,
})
export class UserComponent {
  @Input() user!: User;
}
```

使用 `OnPush`，Angular 会**跳过**检查该组件，除非发生以下情况之一：

```text
1. An @Input REFERENCE changes (new object, not a mutation of the same one)
2. An event fires from within the component (click, etc.)
3. An Observable bound via the async pipe emits
4. You manually call markForCheck()
```

这可以显著减少大型树中的工作 — Angular 忽略整个子树，因为它知道这些子树不可能改变。

## 关键陷阱：需要不可变性

```ts
// ❌ mutating doesn't change the reference → OnPush won't detect it
this.user.name = "Bob";

// ✅ create a NEW object → reference changes → OnPush updates
this.user = { ...this.user, name: "Bob" };
```

`OnPush` 依赖于输入的**引用变化**，所以你必须以不可变的方式更新状态（新对象/数组）。就地修改是典型的 OnPush 错误 — 视图不会更新。

## 手动控制

```ts
constructor(private cdr: ChangeDetectorRef) {}
this.cdr.markForCheck();   // mark this component for the next check
this.cdr.detectChanges();   // run change detection now
```

## 未来：signals + 无 Zone

Signals 启用更精确的**细粒度**更新（只有读取已更改信号的视图），指向完全移除 Zone.js。

## 为什么这很重要

Change detection 是 Angular 性能的核心。

理解默认策略检查整个树 — 以及 `OnPush` + 不可变数据将检查限制于其输入实际改变的组件 — 是优化大型应用的主要杠杆。

不可变性需求是频繁出现的