Angular change detection bài 2 - 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 viết này, chúng ta sẽ cùng khám phá về Change Detection Strategy (Chiến lược phát hiện thay đổi) và cách nó ảnh hưởng đến hiệu suất của ứng dụng Angular.

Table of contents

Change Detection Strategy là gì?

Change Detection Strategy là cơ chế 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 chiến lược chính:

1. Default Strategy: Chiến lược mặc định, kiểm tra mọi binding trong component và các component con mỗi khi Change Detection cycle chạy.

2. OnPush Strategy: Chiến lược tối ưu hóa hiệu suất, chỉ kiểm tra thay đổi khi input references thay đổi hoặc có event được emit từ component.

Default Strategy

Đặc điểm:

• Kiểm tra toàn diện: Mọi binding trong component và các component con đều được kiểm tra mỗi khi Change Detection cycle chạy.

• Đảm bảo đồng bộ: UI luôn được cập nhật kịp thời, nhưng có thể ảnh hưởng đến hiệu suất với các ứng dụng lớn và phức tạp.

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

• DOM events: Click, submit, input change,…

• HTTP requests: Khi có phản hồi từ API.

• Timers: setTimeout, setInterval.

• Promises: Khi một Promise được resolve hoặc reject.

• Observables: Khi một Observable emit giá trị mới.

OnPush Strategy

OnPush là chiến lược tối ưu hóa hiệu suất, giúp giảm số lượng kiểm tra không cần thiết và cải thiện đáng kể hiệu suất ứng dụng.

Cách sử dụng:

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

Đặc điểm:

• Kiểm tra có điều kiện: Chỉ chạy Change Detection khi:

• Input references thay đổi.

• Có event được emit từ component hoặc các phần tử con.

• Sử dụng Async pipe trong template.

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

• Input reference thay đổi: Khi input của component thay đổi.

• Event được emit từ component: Khi component hoặc các phần tử con emit event.

• Async pipe: Khi sử dụng Async pipe trong template.

• Manual trigger: Khi bạn chủ động kích hoạt Change Detection.

Manual trigger Change Detection (sẽ được đề cập trong bài tiếp theo).

Làm việc với OnPush Strategy

1. Immutability (Bất biến)

Khi sử dụng OnPush, việc làm việc với dữ liệu immutable trở nên quan trọng. Thay vì thay đổi trực tiếp đối tượng, bạn nên tạo một đối tượng mới với giá trị cập nhật:

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 giúp tự động quản lý subscription và kích hoạt Change Detection khi có dữ liệu mới:

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

3. EventEmitter

EventEmitter vẫn hoạt động trong OnPush components và kích hoạt Change Detection khi có event được emit:

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à một công cụ mạnh mẽ giúp tối ưu hóa hiệu suất ứng dụng Angular. Trong khi Default Strategy đảm bảo UI luôn đồng bộ với dữ liệu, OnPush Strategy giúp giảm thiểu số lượng kiểm tra không cần thiết, cải thiện hiệu suất đáng kể, đặ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