Ο σωστός τρόπος απεγγραφής του Observable στο Angular
Είναι σημαντικό να διαγραφείτε από τα Observables μας για να αποφύγετε διαρροές μνήμης. Αυτό το άρθρο θα σας δείξει τα περισσότερα μοτίβα με ή χωρίς lib τρίτου μέρους και μπορείτε να καταργήσετε την εγγραφή σας από τα Observables στα στοιχεία Angular σας
1. Χρήση κανονικού τρόπου διαγραφής
Στο παρακάτω παράδειγμα, έχουμε Component, το οποίο εγγράφεται σε ένα παρατηρήσιμο στο άγκιστρο ngOnInit. Κάθε παρατηρήσιμο εκπέμπει μια νέα τιμή για δεδομένα κάθε διαστήματα σε ms.
Στην πραγματικότητα, παρατηρήστε εδώ με τον κανονικό τρόπο κατάργησης εγγραφής γράφουμε πολλαπλές φορές κατάργηση εγγραφής για κάθε παρατηρήσιμο στη μέθοδο ngOnDestroy.
2. Χρήση subsink για απεγγραφή
Τώρα χρησιμοποιούμε το subsink για να αντιμετωπίσουμε αυτό το πρόβλημα πολλαπλής απεγγραφής. Πρώτα πρέπει να εγκαταστήσουμε το subsink γιατί πρόκειται για βιβλιοθήκη τρίτων. αλλά συζητάμε επίσης τη μέθοδο δομημένης βιβλιοθήκης στο επόμενο σημείο.
οπότε εκτελούμε την εντολή npm install subsink
Αρχικά, εισάγουμε subsink και δημιουργούμε ιδιότητα κλάσης αρχικοποιημένη σε new SubSink()
Το SubSink εφαρμόζεται με δύο τρόπους, μια Εύκολη τεχνική (με χρήση ρυθμιστή) και μια Τεχνική Πίνακας/Προσθήκη.
Η χρήση της Εύκολης τεχνικής είναι τόσο απλή όσο η χρήση της μεθόδου ρύθμισης sink.
Η χρήση της τεχνικής Array/Add Technique έχει την ίδια σύνταξη με το ενσωματωμένο RxJS.
Έτσι, το πρόβλημα της πολλαπλής απεγγραφής έχει ταξινομηθεί με επιτυχία και θα λειτουργήσει με τον κανονικό τρόπο.
3. Χρήση της ενσωματωμένης μεθόδου για απεγγραφή
Η συνδρομή RxJS συνοδεύεται από μια ενσωματωμένη μέθοδο Subscription.add που μας επιτρέπει να στοιβάζουμε πολλαπλές λογικές αποκοπής σε μία μόνο παρουσία Συνδρομής.
Αρχικά, δημιουργήστε την ιδιότητα κλάσης αρχικοποιημένη σε new Subscription(), στη συνέχεια, αντί να εκχωρήσουμε τις συνδρομές μας σε ιδιότητες κλάσης, καλέστε τη μέθοδο Subscription.add
Και τέλος, καταργήστε την εγγραφή σας εντός ngOnDestroy
Τέλος, ολοκληρώνουμε την πλήρη κατάργηση της εγγραφής για να αποφύγουμε τη διαρροή μνήμης χωρίς να χάσουμε χρόνο.
Μην ξεχάσετε να χειροκροτήσετε εάν βρήκατε ότι το άρθρο είναι χρήσιμο. Μη διστάσετε να επικοινωνήσετε μαζί μου σε άλλες κοινωνικές πλατφόρμες όπως το LinkedIn και το github.
Αν θέλετε περισσότερο ιστολόγιο σχετικά με το Angular & JavaScript. ακολουθήστε με και σχολιάστε για οποιαδήποτε απορία και πρόταση. Θα επανέλθω με περισσότερες πληροφορίες και θέματα σχετικά με το Angular & JavaScript και πολλά άλλα .😊
