Angular 2 / Rxjs：我真的需要取消訂閱嗎？

Question

我知道我必須在銷毀組件時取消訂閱某些Observable（即：具有無限值的Observable）以防止內存泄漏。 對於有限的 Observables，我不需要這樣做，因為它們將完成並自動unsubscribe 。

但是如果我在我的組件中創建一個無限的 Observable （例如FormGroup.valueChanges或QueryList.changes ），那么這個將被包含它的組件銷毀，所以我認為即使我不這樣做也不會有內存泄漏取消訂閱。

這是一個簡單的例子：

@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)
        );
    }
}

在這里，我沒有unsubscribe this.form.valueChanges ; 當我的組件被銷毀時， this.form.valueChanges也將被銷毀。

在這種情況下是否會出現內存泄漏？

Answer 1

正如Babar所提到的，您需要進行取消訂閱才能阻止這些訂閱繼續觀看更改。

對於你的特殊情況，我認為你有一個觀點。

當我在同一組件中有大量訂閱時，我做的一件事如下。

首先，我創建“訂閱”，一個空的Subscription類型數組。

private subscriptions: Subscription[] = [];

然后，每次我需要訂閱時，我將它推入數組

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

在ngOnDestroy中，我取消訂閱數組中的每個訂閱。

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

Answer 2

當您的組件被銷毀時，您的訂閱者不會等待任何事件發生在他們身上，這將花費內存，有時它也可能會打擾您的邏輯。 例如，路由器事件訂閱它將在您的應用程序中的任何位置觸發，並執行您在訂閱內執行的代碼。

我是第二種情況，如果您在組件之間切換並且從未取消訂閱，您的應用程序將在一堆時間后掛斷，因為無論何時加載組件，新訂戶都會綁定。

@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();
 }
}