Change Detection Strategy trong Angular

Chào mừng các bạn quay trở lại với series về Change Detection trong Angular. Trong bài này, chúng ta sẽ tìm hiểu về Change Detection Strategy và cách nó ảnh hưởng đến performance ứng dụng.

Table of contents

Change Detection Strategy là gì?

Change Detection Strategy xác định cách Angular kiểm tra và cập nhật các thay đổi trong component. Angular cung cấp hai strategy chính:

1. Default
2. OnPush

Default Strategy

Đây là chiến lược mặc định của Angular.

Đặc điểm:

• Kiểm tra mọi binding trong component và các component con mỗi khi Change Detection cycle chạy.
• Đảm bảo UI luôn được cập nhật, nhưng có thể ảnh hưởng đến performance với ứng dụng lớn.

Khi nào Change Detection được kích hoạt (Default mode):

1. DOM event (click, submit, …)
2. HTTP requests
3. Timers (setTimeout, setInterval)
4. Promises
5. Observables

OnPush Strategy

OnPush là chiến lược tối ưu hóa performance.

Cách sử dụng:

1
@Component({
2
    // ...
3
    changeDetection: ChangeDetectionStrategy.OnPush
4
})
5
export class MyOptimizedComponent { }

Đặc điểm:

• Chỉ chạy Change Detection khi input references thay đổi hoặc có event được emit từ component hoặc các phần tử con.
• Giúp giảm số lượng kiểm tra, cải thiện performance đáng kể.

Khi nào Change Detection được kích hoạt (OnPush mode):

1. Input reference thay đổi
2. Event được emit từ component hoặc các phần tử con
3. Sử dụng Async pipe trong template
4. Manually trigger Change Detection (sẽ được đề cập trong bài 3)

Làm việc với OnPush Strategy

1. Immutability

Khi sử dụng OnPush, việc làm việc với dữ liệu immutable trở nên quan trọng:

1
updateUser(user: User) {
2
    this.user = { ...user, lastUpdated: new Date() };
3
}

2. Observable và Async Pipe

Sử dụng Async pipe với OnPush strategy:

1
<div>{{ data$ | async }}</div>

Async pipe tự động subscribe, unsubscribe và kích hoạt Change Detection khi có dữ liệu mới.

3. EventEmitter

EventEmitter vẫn kích hoạt Change Detection trong OnPush components:

1
@Output() userUpdated = new EventEmitter<User>();
2

3
    updateUser(user: User) {
4
      this.userUpdated.emit(user);
5
    }

Kết luận

Change Detection Strategy là công cụ mạnh mẽ để tối ưu hóa performance ứng dụng Angular. OnPush strategy có thể giúp cải thiện đáng kể performance, đặc biệt trong các ứng dụng lớn và phức tạp.

Trong bài tiếp theo, chúng ta sẽ đi sâu vào ChangeDetectorRef và cách manual trigger Change Detection trong các tình huống cụ thể.

Bài viết và video tham khảo