Angular change detection bài 1 - Giới thiệu về Change Detection trong Angular

Change Detection (CD) là một trong những cơ chế nền tảng của Angular, đóng vai trò quan trọng trong việc giữ cho giao diện người dùng (UI) luôn đồng bộ với trạng thái dữ liệu của ứng dụng. Trong bài viết này, chúng ta sẽ cùng khám phá chi tiết về cơ chế này, cách nó hoạt động, và cách tối ưu hóa hiệu suất ứng dụng Angular thông qua việc hiểu rõ Change Detection.

Table of contents

Change Detection là gì?

Change Detection trong Angular là quá trình tự động phát hiện các thay đổi trong dữ liệu của ứng dụng và cập nhật giao diện người dùng (UI) tương ứng. Cơ chế này đảm bảo rằng UI luôn phản ánh chính xác trạng thái hiện tại của ứng dụng, giúp người dùng có trải nghiệm mượt mà và nhất quán.

Cách hoạt động của Change Detection

1. Cập nhật model: Dữ liệu trong ứng dụng thay đổi, có thể do người dùng tương tác, API trả về kết quả, hoặc các tác vụ bất đồng bộ khác.

2. Kích hoạt Change Detection: Angular nhận biết sự thay đổi và bắt đầu quá trình Change Detection.

3. Kiểm tra component tree: Angular duyệt qua cây component từ trên xuống dưới, kiểm tra từng component để xem có thay đổi nào cần được cập nhật hay không.

4. So sánh và cập nhật: Với mỗi component, Angular so sánh giá trị mới và giá trị cũ của các thuộc tính. Nếu có sự khác biệt, Angular sẽ cập nhật các giá trị này.

5. Render view: Cuối cùng, Angular cập nhật DOM để phản ánh các thay đổi, đảm bảo rằng UI luôn đồng bộ với dữ liệu.

Zone.js: Công cụ đằng sau hậu trường

Zone.js là một thư viện quan trọng giúp Angular theo dõi và quản lý các tác vụ bất đồng bộ. Nó bao bọc các API bất đồng bộ của trình duyệt (như setTimeout, Promise, XMLHttpRequest,…), cho phép Angular biết khi nào cần chạy Change Detection.

1
import "zone.js";

Monkey Patching là gì?

Monkey Patching là một kỹ thuật trong lập trình, nơi bạn thay đổi hoặc mở rộng hành vi của một hàm hoặc đối tượng có sẵn trong runtime. Zone.js sử dụng Monkey Patching để bao bọc các API bất đồng bộ của trình duyệt, giúp Angular theo dõi các tác vụ bất đồng bộ và kích hoạt Change Detection khi cần.

Ví dụ đơn giản về Monkey Patching:

1
// Lưu trữ hàm gốc
2
const originalConsoleLog = console.log;
3

4
// Monkey Patching hàm console.log
5
console.log = function(...args) {
6
  // Thêm thông điệp trước khi gọi hàm gốc
7
  originalConsoleLog('Đang gọi console.log:', ...args);
8

9
  // Gọi hàm gốc
10
  originalConsoleLog(...args);
11
};
12

13
// Sử dụng hàm console.log đã được patch
14
console.log('Hello, world!');
15
console.log('Monkey patching is cool!');

Trong ví dụ trên, chúng ta đã thay đổi hành vi của console.log bằng cách thêm một log mỗi khi hàm được gọi. Zone.js sử dụng kỹ thuật tương tự để theo dõi các tác vụ bất đồng bộ.

Bạn có thể xem cách Zone.js bao bọc API timer: Zone.js timer

Khi nào Change Detection được kích hoạt?

Change Detection được kích hoạt trong nhiều trường hợp khác nhau, bao gồm:

1. DOM events: Các sự kiện như click, submit, input change,…

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

3. Timers: Khi setTimeout hoặc setInterval được kích hoạt.

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

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

NgZone: Kiểm soát Change Detection

NgZone là một service trong Angular cho phép bạn kiểm soát khi nào Change Detection nên được kích hoạt. Điều này đặc biệt hữu ích khi bạn muốn thực hiện các tác vụ nặng mà không muốn kích hoạt Change Detection liên tục.

1
constructor(private ngZone: NgZone) {}
2

3
performHeavyComputation() {
4
  this.ngZone.runOutsideAngular(() => {
5
    // Code ở đây sẽ không kích hoạt change detection
6
  });
7
}

Async Pipe: Tự động quản lý Change Detection

Async pipe là một công cụ mạnh mẽ trong Angular giúp bạn xử lý Observables và Promises trong template một cách dễ dàng. Nó không chỉ giúp đơn giản hóa code mà còn tự động kích hoạt Change Detection khi có dữ liệu mới.

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

Kết luận

Change Detection là một cơ chế quan trọng trong Angular, giúp ứng dụng của bạn luôn đồng bộ giữa dữ liệu và giao diện người dùng. Hiểu rõ cách nó hoạt động, cũng như cách tối ưu hóa hiệu suất thông qua các công cụ như Zone.js, NgZone, và Async pipe, sẽ giúp bạn xây dựng các ứng dụng Angular mạnh mẽ và hiệu quả hơn.

Trong bài viết tiếp theo, chúng ta sẽ đi sâu vào các chiến lược Change Detection và cách tối ưu hóa hiệu suất ứng dụng Angular.

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