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. Hôm nay, 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 hơn.

Table of contents

ChangeDetectorRef là gì?

ChangeDetectorRef là một service 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.

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

1. detectChanges()

Kích hoạt Change Detection cho component hiện tại và các con của nó.

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

3
performHeavyComputation() {
4
    this.ngZone.runOutsideAngular(() => {
5
        // ...
6
        this.cdr.detectChanges();
7
    });
8
}

2. 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.

1
constructor(private cdr: ChangeDetectorRef) {}
2

3
updateDataAsync() {
4
  this.someAsyncOperation().then(() => {
5
    this.data = newData;
6
    this.cdr.markForCheck();
7
  });
8
}

3. detach()

Tách component khỏi Change Detection tree, ngăn không cho nó được kiểm tra tự động.

1
constructor(private cdr: ChangeDetectorRef) {}
2

3
ngOnInit() {
4
  this.cdr.detach();
5
}

4. reattach()

1
reattachComponent() {
2
    this.cdr.reattach();
3
}

5. checkNoChanges()

Kiểm tra xem có bất kỳ thay đổi nào trong component và và trả về một exception.

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:

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

3
performHeavyComputation() {
4
  this.ngZone.runOutsideAngular(() => {
5
    this.result = heavyComputation();
6
    this.cdr.detectChanges();
7
  });
8
}

Lưu ý quan trọng

1. Sử dụng ChangeDetectorRef cẩn thận, vì nó có thể làm phức tạp logic ứng dụng.
2. Luôn đo lường performance trước và sau khi áp dụng các tối ưu hóa Change Detection.
3. Trong hầu hết các trường hợp, OnPush strategy đã đủ để cải thiện performance mà không cần can thiệp manual.

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