Góc 2/Rxjs: tôi có thực sự cần hủy đăng ký không?

Question

Tôi hiểu rằng tôi phải hủy đăng ký chứng nhận có thể quan sát (nghĩa là: Các quan sát có giá trị vô hạn) khi các thành phần bị hủy để ngăn rò rỉ bộ nhớ. Tôi không cần làm điều đó cho hữu hạn Quan sát vì chúng sẽ hoàn thành và tự động unsubscribe.

Nhưng nếu tôi có thể tạo một vô hạnObservable trong thành phần của tôi (ví dụ FormGroup.valueChanges, hoặc QueryList.changes), chương trình này sẽ bị phá hủy với thành phần chứa nó, vì vậy tôi nghĩ rằng họ sẽ không có rò rỉ bộ nhớ thậm chí nếu tôi không hủy đăng ký khỏi nó.

Dưới đây là một ví dụ đơn giản:

@Component({}) 
export class DummyComponent { 
    form: FormGroup; 

    constructor(private fb: FormBuilder) { 
     this.form = this.fb.group({ 
      firstName: [''], 
      lastName: [''] 
     }); 
     this.form.valueChanges.subscribe(
      x => console.log(x) 
     ); 
    } 
} 

Ở đây, tôi không unsubscribe từ this.form.valueChanges; khi thành phần của tôi bị phá hủy, số this.form.valueChanges cũng sẽ bị hủy.

Có rò rỉ bộ nhớ trong trường hợp này không?

Answer 1

Như Babar đã đề cập, bạn cần phải hủy đăng ký để ngừng các đăng ký đó tiếp tục xem thay đổi.

Đối với trường hợp cụ thể của bạn, tôi nghĩ rằng bạn có một điểm.

Một điều tôi làm khi có nhiều đăng ký trong cùng một thành phần như sau.

Trước tiên, tôi tạo "đăng ký", một Mảng trống thuộc loại Đăng ký.

private subscriptions: Subscription[] = []; 

Sau đó, mỗi khi tôi cần phải làm đăng ký tôi đẩy nó vào mảng

this.subscriptions.push(this.form.valueChanges.subscribe(x => console.log(x))); 

Và trong ngOnDestroy tôi bỏ đăng ký cho tất cả thuê bao bên trong mảng.

ngOnDestroy(): void { 
    this.subscriptions.forEach((elem) => { elem.unsubscribe(); }) 
} 

Answer 2

Khi thành phần của bạn bị hủy, người đăng ký của bạn không phải là họ vẫn đang chờ đợi bất kỳ sự kiện nào đến với họ, nó sẽ mất nhiều thời gian cho bộ nhớ của bạn. ví dụ như đăng ký sự kiện của bộ định tuyến, nó sẽ kích hoạt ở mọi nơi trong ứng dụng của bạn và thực thi mã bạn đã đăng ký bên trong.

Tôi là trường hợp thứ hai nếu bạn chuyển đổi giữa các thành phần và không bao giờ hủy đăng ký ứng dụng của bạn sẽ bị treo sau một loạt thời gian vì bất cứ khi nào bạn tải thành viên mới, người đăng ký sẽ ràng buộc.

@Component({}) 
export class DummyComponent implements OnDestroy { 
form: FormGroup; 
subscription: Subscription; // from rxjs 
constructor(private fb: FormBuilder) { 
    this.form = this.fb.group({ 
     firstName: [''], 
     lastName: [''] 
    }); 
    this.subscription = this.form.valueChanges.subscribe(
     x => console.log(x) 
    ); 
} 

ngOnDestroy(): void { 
    this.subscription.unsubscribe(); 
} 
}