Παρουσιάζοντας τα Signals: Angular's New Primitive for Reactivity

Στις 15 Φεβρουαρίου 2023, η ομάδα της Angular παρουσίασε τα Signals στο πλαίσιο με ένα απλό αίτημα έλξης. Από τότε, υπήρξαν έντονες συζητήσεις στην κοινότητα Angular σχετικά με τη χρήση και τα οφέλη του. Πολλοί έχουν αρχίσει ακόμη και να δημιουργούν πρωτότυπα με σήματα για να δοκιμάσουν τη λειτουργικότητά του.

Ας ρίξουμε μια ματιά στον τρόπο λειτουργίας αυτής της νέας δυνατότητας, τη σύνταξή της και πώς να τη χρησιμοποιήσετε μόλις κυκλοφορήσει πλήρως.

Τι είναι τα σήματα;

Ο τύπος σήματος είναι ο νέος αντιδραστικός πρωτόγονος τύπος της Angular. Ο σκοπός του είναι να διατηρεί μια τιμή, ακριβώς όπως μια τυπική μεταβλητή, αλλά το διακριτικό χαρακτηριστικό ενός σήματος είναι η μοναδική του συμπεριφορά. Εάν αλλάξει ένα σήμα, θα ειδοποιήσει οτιδήποτε εξαρτάται από αυτό.

Επιπλέον, το Angular μπορεί να χρησιμοποιήσει σήματα ως τη νέα προσέγγιση για τον εντοπισμό και την ενεργοποίηση αλλαγών, αντί για την τρέχουσα προεπιλεγμένη προσέγγιση του βρώμικου ελέγχου ολόκληρου του δέντρου στοιχείων.

Πώς να χρησιμοποιήσετε τα σήματα στο Angular

Ένα σήμα θα μοιάζει κάπως έτσι:

@Συστατικό({
 εκλέκτορας: "η εφαρμογή μου",
 αυτόνομο: αληθής,
 πρότυπο: `
 Καταμέτρηση: {{ count() }} </div>
 Διπλό: {{ double() }} </div>
"changeCount()"></button>
`,
})
εξαγωγήτάξη AppComponent{
 μέτρηση = σήμα(0)
 διπλό = υπολογισμένο(() =>Αυτό.μετρώ() * 2);

 changeCount() {
Αυτό.count.set(5)
 }
}

Σε αυτό το στοιχείο της εφαρμογής, το πλήθος μεταβλητών είναι ένα σήμα που έχει αρχικοποιηθεί με την τιμή μηδέν. Στη συνέχεια, το count αναφέρεται στο double (μια υπολογισμένη τιμή) και στο πρότυπο. Έτσι, όταν το κλικ του κουμπιού ορίσει την τιμή του πλήθους σε πέντε, τόσο η υπολογισμένη τιμή (διπλή) όσο και οι τιμές στο πρότυπο θα ενημερωθούν.

Κάθε μέρος του Γωνιακό εξάρτημα που εξαρτάται από το σήμα θα ενημερωθεί αυτόματα μόλις αλλάξει η τιμή.

Γιατί είναι σημαντική η εισαγωγή των σημάτων

Τα σήματα διευκολύνουν την εκμάθηση και την εργασία με το Angular. Η εναλλαγή σε σήματα ως ο νέος προεπιλεγμένος τρόπος εκμάθησης και δημιουργίας με το Angular θα εναρμονίσει τη διαδικασία εκμάθησης. Είτε προτιμάμε ένα πιο επιτακτικό στυλ κωδικοποίησης με το Angular είτε θέλουμε να μάθουμε ένα πιο δηλωτικό στυλ κωδικοποίησης.

Οι περισσότεροι άνθρωποι αρχίζουν να κωδικοποιούν επιτακτικά επειδή είναι γενικά πιο διαισθητικό και οικείο στους ανθρώπους. Αλλά η μετάβαση από την επιτακτική προσέγγιση στον δηλωτικό τρόπο περιλαμβάνει μια αλλαγή παραδείγματος και μια συνολική αλλαγή στο νοητικό μας μοντέλο. Αυτός είναι ο λόγος για τον οποίο το RX.js, η reactive βιβλιοθήκη, είναι δύσκολο να μαθευτεί για πολλούς.

Τα σήματα θα φέρουν μαζί αυτές τις δύο ξεχωριστές προσεγγίσεις. Όλοι μπορούν να μάθουν σήματα από προεπιλογή, να αρχίσουν να μαθαίνουν τις έννοιες πίσω από την αντιδραστικότητα και να μην ανησυχούν καν για την ενσωμάτωση Το RX.js της Angular αν δεν μπορούν ή δεν θέλουν.

Μόλις είστε άνετοι με το βασικά του Angular και θέλετε να μεταβείτε σε ένα πιο δηλωτικό στυλ κωδικοποίησης, μπορείτε εύκολα να προσθέσετε το RX.js στις έννοιες που ήδη καταλαβαίνετε.

Τα σήματα πρέπει να βελτιώνουν τον γωνιακό προγραμματισμό για όλους

Το Signals είναι ο νέος αντιδραστικός μηχανισμός της Angular που μπορείτε να χρησιμοποιήσετε για να δημιουργήσετε αντιδραστικές τιμές για ανάγνωση από τους καταναλωτές. Ένα σήμα ειδοποιεί αμέσως όλους τους καταναλωτές μόλις αλλάξει η τιμή του. Τα σήματα εναρμονίζουν τη διαδικασία εκμάθησης του Angular συνδυάζοντας τις επιτακτικές και δηλωτικές προσεγγίσεις κωδικοποίησης.

Το Angular θα βασίζεται σε σήματα για να κάνει την ανίχνευση αλλαγών πιο ελαφριά και στιβαρή. Επομένως, ως προγραμματιστής Angular, η εκμάθηση της χρήσης σημάτων θα σας δώσει μια πιο σταθερή κατανόηση της αντιδραστικότητας στο Angular και θα σας κάνει καλύτερο προγραμματιστή. Μην ξεχάσετε να μάθετε τα βασικά του Angular πριν μάθετε τα πιο προηγμένα μέρη.