Angular：停止过度使用 ChangeDetectorRef

Source: Dev.to

（请提供您希望翻译的具体文本内容，我将为您翻译成简体中文，并保持原有的格式、Markdown 语法以及技术术语不变。）

在 Angular 开发中，我们经常会遇到 变更检测问题，例如模板中的某些 字段未能正确更新。此时，我们需要调查问题所在，而 AI 已经成为我们日常工作的一部分，常常用它来帮助定位根本原因。

然而，我多次观察到 Copilot 会建议 使用 detectChanges() 或 markForCheck() 来快速解决各种问题。在大多数情况下，这些方法 并不能解决根本原因。实际问题通常是组件之间的数据流不正确或架构不佳。这些方法应仅在特定情形下使用——绝对 不能 作为误解或滥用 OnPush 变更检测策略的变通办法。

理解变更检测策略

ChangeDetectionStrategy.Default

Angular 在每一次变更检测周期中检查 每个组件。

ChangeDetectionStrategy.OnPush

Angular 仅在以下情况检查组件：

• @Input 引用发生变化
• async pipe 收到新值
• 模板中触发事件
• 调用了 detectChanges() 或 markForCheck()

注意： 在讨论变更检测时，还需要提及 zone.js。Angular 的 zone.js 库会在 setTimeout、HTTP 请求和事件处理器等异步操作后自动触发变更检测。这意味着手动调用 detectChanges() 很少需要。

常见反模式

detectChanges()

@Component({
  selector: 'app-user',
  template: '{{ user?.name }}',
  changeDetection: ChangeDetectionStrategy.Default
})
export class UserComponent {
  @Input() user: User | undefined;

  constructor(private cdr: ChangeDetectorRef) {}

  // ❌ WRONG: Mutating @Input and calling detectChanges()
  updateUser(user: User) {
    this.user = user;
    this.cdr.detectChanges(); // Doesn't fix the architecture problem
  }
}

问题

1. user 应该通过父组件的 @Input() 更新，而不是通过内部的 updateUser 方法。
2. 调用 detectChanges() 是不必要的，因为 Angular 应该会自动检测变化。

两个问题都表明该组件的架构存在问题。

@Component({
  selector: 'app-data',
  template: '{{ data }}',
  changeDetection: ChangeDetectionStrategy.Default
})
export class DataComponent {
  data = '';

  constructor(
    private service: DataService,
    private cdr: ChangeDetectorRef
  ) {}

  // ❌ WRONG: Using detectChanges() instead of fixing data flow
  loadData() {
    this.service.getData().subscribe(result => {
      this.data = result;
      this.cdr.detectChanges(); // Workaround for bad architecture
    });
  }
}

问题 – detectChanges() 在订阅内部使用。Observable 发出后 Angular 已经会运行变更检测，这表明数据流或架构有缺陷。

markForCheck()

@Component({
  selector: 'app-user-list',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: '{{ user.name }}'
})
export class UserListComponent {
  @Input() users: User[] = [];

  constructor(private cdr: ChangeDetectorRef) {}

  // ❌ WRONG: Mutating @Input internally and then calling markForCheck()
  addUser(user: User) {
    this.users.push(user);
    this.cdr.markForCheck();
  }
}

问题 – 使用 OnPush 时，输入应视为不可变。父组件必须创建 新的数组引用（this.users = [...this.users, user]），而不是修改已有数组。

// ❌ WRONG: OnPush component should receive data via inputs
@Component({
  selector: 'app-user',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: '{{ user.name }}'
})
export class UserComponent {
  user: User = { name: 'John', age: 30 };

  constructor(
    private service: UserService,
    private cdr: ChangeDetectorRef
  ) {
    this.service.userNameChanged$.subscribe(userName => {
      this.user.name = userName;
      this.cdr.markForCheck();
    });
  }
}

问题 – 组件修改内部的 user 对象并使用 markForCheck() 强制更新。更好的做法是将 user 设为 @Input()，让父组件在名称变化时提供 新的对象引用。

何时可以接受 markForCheck()？

OnPush 在组件由 不可变输入 和 单向数据流 驱动时效果最佳。markForCheck() 有其合理的使用场景（例如，当服务发出一个未通过 async pipe 绑定的值时），但如果你发现自己频繁调用它，请重新考虑该组件是否适合使用 OnPush。

结论

ChangeDetectorRef 是一个强大的工具，但频繁依赖它往往意味着架构存在问题。markForCheck() 和 detectChanges() 往往 掩盖底层问题，而不是解决它们。

相反，应关注正确的数据流：

• 使用不可变对象，并用新引用替换输入。
• 利用 async 管道处理可观察流。
• 保持组件小而专注，让父组件管理状态。

当数据流正确时，Angular 的内置变更检测（无论是否使用 OnPush）都会在不需要手动干预的情况下保持 UI 同步。

对于可观察对象，配合 OnPush 保持不可变性，并确保在数据变化时组件收到新引用。如果你发现自己经常调用这些方法，是时候退一步，重新设计数据流了。

建议： 将涉及 ChangeDetectorRef 的 AI 建议视为起点，而非最终答案。虽然 ChangeDetectorRef 在 特定情况下 能解决实际问题，但你应始终 停下来仔细检查，确认问题是否真正出在数据流或组件设计上。