Fuites de mémoire dans Angular2
Qu'est-ce qui peut causer des fuites de mémoire dans l'application Angular2 (rc5)? Comment les prévenir?
Des exemples de code incorrects/corrects seraient très appréciés.
Dans le navigateur, Angular n’est que du JavaScript, c’est pourquoi les mises en garde typiques s'appliquent.
Angular met particulièrement en garde contre Observables. Une fois que vous vous êtes abonné à l'un d'entre eux, il continuera de fonctionner jusqu'à votre désinscription, même si vous accédez à une autre vue. Une forme angulaire inhabituelle vous concerne dans la mesure du possible (par exemple, si vous utilisez le tube async dans le modèle:
modèle
//listenToServer returns an observable that keeps emitting updates
serverMsgs = httpService.listenToServer();
modèle
<div>{{serverMsgs | async}}</div>
Angular affichera les messages du serveur dans le div, mais mettra fin à l'abonnement lorsque vous naviguez.
Toutefois, si vous vous abonnez vous-même, vous devez également vous désabonner:
modèle
msgs$ = httpService.listenToServer().subscribe(
msg => {this.serverMsgs.Push(msg); console.log(msg)}
);
modèle
<div *ngFor="let msg of serverMsgs">{{msg}}</div>
Lorsque vous vous éloignez, même si vous ne pouvez pas voir les nouveaux messages apparaître dans la vue, vous les verrez imprimés sur la console dès leur arrivée. Pour vous désabonner lorsque le composant est supprimé, vous devez:
ngOnDestroy(){ this.msgs$.unsubscribe(); }
À partir de la documentation :
nous devons nous désabonner avant qu'Annular ne détruise le composant. Échec à cela pourrait créer une fuite de mémoire.
L'aspect abonnement et désabonnement que @BeetleJuice mentionné ci-dessus est certainement la précaution n ° 1 que nous devons garder à l'esprit pour éviter les fuites de mémoire.
Pour mieux comprendre certaines techniques de gestion de la mémoire, vous pouvez consulter Gestion de la mémoire dans les applications angulaires . (Remarque que vous pouvez trouver exactement le même article dans plusieurs sites. Des problèmes de droits d'auteur ici et là?)
Il y a une chose que je voudrais dire au sujet des "auditeurs d'événements" en particulier. Au cours d’un projet récent, j’utilise Event emitter et des écouteurs pour les composants enfants afin de communiquer avec les composants parents. Je m'en tiens particulièrement à une règle:
Les composants parents écoutent uniquement les composants enfants DIRECT.
Ici, les composants parents agissent en tant que composants de conteneur et les composants enfants agissent en tant que composants de présentation.
De cette façon, je peux m'assurer que chaque fois que je supprime un composant enfant, il n'y a qu'un seul emplacement, le parent direct, pour supprimer tous ses écouteurs. Jusqu'à présent, cette règle fonctionne plutôt bien pour moi.