Change detection của Angular hoạt động như thế nào, và OnPush làm gì?

Question

Accepted Answer

**Change detection** là cách Angular giữ DOM đồng bộ với dữ liệu component — sau bất kỳ sự kiện nào có khả năng thay đổi state, nó kiểm tra các component và cập nhật view nơi dữ liệu thay đổi. Theo mặc định việc kiểm tra này rộng; **`OnPush`** thu hẹp nó lại để tăng hiệu năng.

## Change detection mặc định hoạt động như thế nào

```text
Một sự kiện async kích hoạt (click, response HTTP, setTimeout) →
Zone.js thông báo cho Angular → Angular kiểm tra TOÀN BỘ cây component
từ trên xuống dưới → cập nhật mọi binding có giá trị thay đổi.
```

Theo mặc định (chiến lược `Default`), Angular kiểm tra lại **mọi component** trong mỗi sự kiện — đúng đắn, nhưng có thể lãng phí trong các cây lớn.

## OnPush — bỏ qua các component không thể đã thay đổi

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

@Component({
  selector: "app-user",
  changeDetection: ChangeDetectionStrategy.OnPush, // chọn dùng
  template: `{{ user.name }}`,
})
export class UserComponent {
  @Input() user!: User;
}
```

Với `OnPush`, Angular **bỏ qua** việc kiểm tra component này trừ khi một trong những điều sau xảy ra:

```text
1. THAM CHIẾU của một @Input thay đổi (đối tượng mới, không phải mutate cùng một cái)
2. Một sự kiện kích hoạt từ bên trong component (click, v.v.)
3. Một Observable bind qua pipe async phát ra giá trị
4. Bạn gọi markForCheck() thủ công
```

Điều này có thể cắt giảm đáng kể công việc trong các cây lớn — Angular bỏ qua toàn bộ các cây con mà nó biết không thể đã thay đổi.

## Cạm bẫy then chốt: bắt buộc bất biến (immutability)

```ts
// ❌ mutate không làm thay đổi tham chiếu → OnPush sẽ không phát hiện
this.user.name = "Bob";

// ✅ tạo một đối tượng MỚI → tham chiếu thay đổi → OnPush cập nhật
this.user = { ...this.user, name: "Bob" };
```

`OnPush` dựa vào **thay đổi tham chiếu** cho các input, nên bạn phải cập nhật state theo lối bất biến (đối tượng/mảng mới). Mutate tại chỗ là lỗi OnPush kinh điển — view sẽ không cập nhật.

## Kiểm soát thủ công

```ts
constructor(private cdr: ChangeDetectorRef) {}
this.cdr.markForCheck();   // đánh dấu component này cho lần kiểm tra tiếp theo
this.cdr.detectChanges();   // chạy change detection ngay bây giờ
```

## Tương lai: signal + zoneless

Signal cho phép các cập nhật thậm chí chính xác hơn, **mịn hơn** (chỉ các view đọc một signal đã thay đổi), hướng tới việc loại bỏ Zone.js hoàn toàn.

## Tại sao điều này quan trọng

Change detection là trung tâm của hiệu năng Angular.

Hiểu rằng chiến lược mặc định kiểm tra toàn bộ cây — và rằng `OnPush` + dữ liệu bất biến giới hạn việc kiểm tra vào các component có input thực sự thay đổi — là đòn bẩy chính để tối ưu các ứng dụng lớn.

Yêu cầu bất biến là nguồn lỗi thường gặp kiểu "vì sao view của tôi không cập nhật?", và signal đại diện cho hướng đi của Angular tới reactivity mịn hơn, hiệu quả hơn.