Angular change detection bài 3 - Hiểu sâu về Change Detection với ChangeDetectorRef

Chào mừng các bạn đến với bài cuối cùng trong series về Change Detection trong Angular. Trong bài viết này, chúng ta sẽ đi sâu vào ChangeDetectorRef và cách sử dụng nó để kiểm soát Change Detection một cách chi tiết và hiệu quả.

Table of contents

ChangeDetectorRef là gì?

ChangeDetectorRef là một service trong Angular cung cấp các phương thức để tương tác trực tiếp với cơ chế Change Detection của một component. Nó cho phép bạn kiểm soát khi nào và cách thức Change Detection được thực hiện, giúp tối ưu hóa hiệu suất ứng dụng.

Các phương thức quan trọng của ChangeDetectorRef

1. detectChanges()

Phương thức detectChanges() kích hoạt Change Detection cho component hiện tại và các component con của nó. Đây là cách thủ công để yêu cầu Angular kiểm tra và cập nhật view.

typescript

1
constructor(private ngZone: NgZone, private cdr: ChangeDetectorRef) {}
2

3
performHeavyComputation() {
4
  this.ngZone.runOutsideAngular(() => {
5
    // Thực hiện các tác vụ nặng
6
    this.result = heavyComputation();
7
    // Kích hoạt Change Detection thủ công
8
    this.cdr.detectChanges();
9
  });
10
}

2. markForCheck()

Phương thức markForCheck() đánh dấu component và các component cha của nó cần được kiểm tra trong Change Detection cycle tiếp theo. Điều này hữu ích khi bạn sử dụng OnPush Strategy và muốn thông báo cho Angular rằng có sự thay đổi cần được cập nhật.

1
constructor(private cdr: ChangeDetectorRef) {}
2

3
updateDataAsync() {
4
  this.someAsyncOperation().then(() => {
5
    this.data = newData;
6
    // Đánh dấu component cần được kiểm tra
7
    this.cdr.markForCheck();
8
  });
9
}

3. detach()

Phương thức detach() tách component khỏi Change Detection tree, ngăn không cho nó được kiểm tra tự động. Điều này giúp giảm thiểu số lượng kiểm tra không cần thiết, đặc biệt khi bạn biết rằng component không cần cập nhật thường xuyên.

1
constructor(private cdr: ChangeDetectorRef) {}
2

3
ngOnInit() {
4
  // Tách component khỏi Change Detection tree
5
  this.cdr.detach();
6
}

4. reattach()

Phương thức reattach() gắn lại component vào Change Detection tree sau khi đã tách nó ra bằng detach(). Điều này cho phép component tiếp tục được kiểm tra và cập nhật tự động.

1
reattachComponent() {
2
  // Gắn lại component vào Change Detection tree
3
  this.cdr.reattach();
4
}

5. checkNoChanges()

Phương thức checkNoChanges() kiểm tra xem có bất kỳ thay đổi nào trong component và ném một exception nếu phát hiện thay đổi. Đây là công cụ hữu ích để đảm bảo rằng component không bị thay đổi ngoài ý muốn.

1
this.cdr.checkNoChanges();

Kết hợp ChangeDetectorRef với NgZone

Bạn có thể kết hợp ChangeDetectorRef với NgZone để tối ưu hóa hiệu suất, đặc biệt khi 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, private cdr: ChangeDetectorRef) {}
2

3
performHeavyComputation() {
4
  this.ngZone.runOutsideAngular(() => {
5
    // Thực hiện các tác vụ nặng
6
    this.result = heavyComputation();
7
    // Kích hoạt Change Detection thủ công
8
    this.cdr.detectChanges();
9
  });
10
}

Lưu ý quan trọng

• Sử dụng cẩn thận: ChangeDetectorRef là một công cụ mạnh mẽ, nhưng việc sử dụng không đúng cách có thể làm phức tạp logic ứng dụng.

• Đo lường hiệu suất: Luôn đo lường hiệu suất trước và sau khi áp dụng các tối ưu hóa Change Detection để đảm bảo rằng chúng thực sự mang lại lợi ích.

• Ưu tiên OnPush Strategy: Trong hầu hết các trường hợp, sử dụng OnPush Strategy đã đủ để cải thiện hiệu suất mà không cần can thiệp thủ công.

Kết luận

ChangeDetectorRef cung cấp cho chúng ta quyền kiểm soát chi tiết Change Detection trong Angular. Mặc dù mạnh mẽ, nhưng nó cũng đòi hỏi sự cẩn trọng khi sử dụng. Hãy sử dụng nó khi thực sự cần thiết và luôn đảm bảo rằng bạn hiểu rõ tác động của nó đến ứng dụng của mình.

Với series này, hy vọng bạn đã có một hiểu biết sâu sắc về Change Detection trong Angular. Hãy áp dụng những kiến thức này vào dự án của bạn và xây dựng những ứng dụng Angular hiệu quả và mạnh mẽ!

Chúc các bạn code vui vẻ và hiệu quả!

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