Entiendo que debo cancelar la suscripción de ciertos Observables (es decir, Observables que tienen un valor infinito ) cuando los Componentes se destruyen para evitar pérdidas de memoria. No necesito hacer eso para Observables finitos , ya que se completarán y se darán de unsubscribe automáticamente.
Pero si creo un Observable infinito en mi componente (por ejemplo, FormGroup.valueChanges , o QueryList.changes ), este se destruirá con el componente que lo contiene, así que creo que no habrá pérdida de memoria incluso si no lo hago. darse de baja de él.
Aquí hay un ejemplo simple:
@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) ); } } Aquí, no me doy de unsubscribe de this.form.valueChanges ; cuando se destruye mi componente, this.form.valueChanges también se destruirá.
¿Habrá una pérdida de memoria en este caso?
Como mencionó Babar, debe cancelar la suscripción para detener esas suscripciones y continuar observando los cambios.
Para tu caso particular creo que tienes razon.
Una cosa que hago cuando tengo muchas suscripciones en el mismo componente es lo siguiente.
Primero creo "suscripciones", una Matriz vacía de tipo Suscripción.
private subscriptions: Subscription[] = [];Luego, cada vez que necesito suscribirme, lo inserto en la matriz
this.subscriptions.push(this.form.valueChanges.subscribe(x => console.log(x)));Y en ngOnDestroy cancelo la suscripción a todas las suscripciones dentro de la matriz.
ngOnDestroy(): void { this.subscriptions.forEach((elem) => { elem.unsubscribe(); }) }Cuando su componente se destruye, sus suscriptores no están todavía esperando que les llegue algún evento. También costará memoria, a veces también puede perturbar su lógica. por ejemplo, la suscripción de eventos del enrutador se activará en todas partes de su aplicación y ejecutará el código que hizo dentro de la suscripción.
En segundo lugar, si cambia entre componentes y nunca canceló su suscripción, su aplicación se colgará después de un montón de tiempo porque cada vez que carga el componente, se vinculan nuevos suscriptores.
@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(); } }