각도 2/Rxjs : 정말로 구독을 취소해야합니까?

Question

메모리 누출을 막기 위해 구성 요소가 파괴 될 때 Observable (즉, Observable : 무한대 값) 항목을 구독 취소해야한다는 것을 이해합니다. 나는 유한 값 Observables을 완료 할 때 자동으로 수행 할 필요가 없습니다. unsubscribe.

그러나 나는 만들 경우 내 구성 요소의Observable (예 FormGroup.valueChanges, 또는 QueryList.changes 용),이 하나를 포함하는 구성 요소와 파괴 될 것입니다, 그래서 그들은 더 메모리 누수도 없을 것입니다 생각 무한 내가 이 아니라면을 수신 거부하십시오. 내가하지 unsubscribethis.form.valueChanges에서 작업을 수행, 여기

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

; 여기

은 간단한 예입니다 내 구성 요소가 파괴되면 this.form.valueChanges도 파괴됩니다.

이 경우 메모리 누수가 발생합니까?

Answer 1

Babar가 언급했듯이 구독을 중단해야 변경 사항을 계속 볼 수 있습니다.

귀하의 특별한 경우에는 귀하에게 중요한 점이 있다고 생각합니다.

동일한 구성 요소에 가입이 많을 때 한 가지해야 할 일은 다음과 같습니다.

먼저 구독 유형의 빈 배열 인 "구독"을 만듭니다.

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