Làm thế nào để ngăn chặn rò rỉ bộ nhớ trong Angular
Mỗi khi bạn tạo một subscription hay một tham chiếu đến bộ lọc cho observable, nếu bạn không cẩn thận và hủy đăng ký thì tham chiếu sẽ nằm trong bộ nhớ ngay cả khi thành phần bạn tạo sẽ bị phá hủy. Điều này được gọi là rò rỉ bộ nhớ có thể gây ra một vấn đề nghiêm trọng phụ thuộc vào kích thước của ứng dụng của bạn.
Hủy đăng ký
Hủy đăng ký là giải pháp đơn giản nhất cho vấn đề này, bất cứ khi nào bạn tạo đăng ký, bạn phải giữ tham chiếu đến đăng ký đó và khi bạn đã hoàn tất đăng ký, bạn phải gọi .unsubscribe trên tham chiếu.
Việc sử dụng móc vòng đời của ngOnDestroy rất quan trọng ở đây, nó sẽ được gọi khi thành phần sắp bị phá hủy. Một vấn đề với cách tiếp cận này là bạn phải giữ một tham chiếu đến tất cả các observable mà bạn đang tạo ra trong thành phần của bạn.
TakeUntil
Cách tiếp cận trước đó có một vấn đề mà chúng ta cần phải tạo một tham chiếu cho tất cả các biến và để tránh vấn đề đó, chúng ta có thể sử dụng toán tử takeUntil để hủy đăng ký. takeUntil là một toán tử rxjs có một observable như một đối số. Nó sẽ giữ cho đăng ký đầu tiên tồn tại cho đến khi lần thứ hai observable được kết thúc.
Async Pipe
Khi có thể được sử dụng và sử dụng đúng cách, đây là phương pháp lý tưởng so với hai phương pháp đầu tiên. Đường async có một observable như một đối số và trả về giá trị từ trực tiếp observable tới mẫu. Vì vậy, khi một thành phần bị phá hủy, chúng tôi không cần phải làm bất kỳ điều gì vì Async Pipe sẽ xử lý việc hủy đăng ký khỏi các thành phần observable. Đây là cách đăng ký hiệu quả nhất và hủy đăng ký các observable.
Có một vài cảnh báo như bạn không thể sử dụng lại đăng ký khi sử dụng async pipe. Bạn buộc phải sử dụng nhiều async cho cùng một observable mà sẽ tạo nhiều đăng ký nhưng có nhiều phương pháp khác nhau để khắc phục những vấn đề đó.
BTV.Trần Thị Thu Trang
Phòng Truyền Thông IMIC Technology Việt Nam
Hotline: 0916 878 224
Email: trangttt2@imic.edu.vn