Presentazione dei segnali: la nuova primitiva per la reattività di Angular

Il 15 febbraio 2023, il team di Angular ha introdotto Signals nel framework con una semplice richiesta pull. Da allora, ci sono state accese discussioni nella comunità di Angular sul suo utilizzo e sui suoi vantaggi. Molti hanno persino iniziato a creare prototipi con segnali per provarne la funzionalità.

Diamo un'occhiata a come funziona questa nuova funzionalità, alla sua sintassi e a come usarla una volta che è stata implementata completamente.

Cosa sono i segnali?

Il tipo di segnale è il nuovo tipo primitivo reattivo di Angular. Il suo scopo è quello di contenere un valore, proprio come una variabile standard, ma la caratteristica distintiva di un segnale è il suo comportamento unico. Se un segnale cambia, avviserà tutto ciò che dipende da esso.

Inoltre, Angular può utilizzare i segnali come nuovo approccio per rilevare e attivare il cambiamento, piuttosto che l'attuale approccio predefinito di controllo sporco dell'intero albero dei componenti.

Come usare i segnali in Angular

Un segnale sarà simile a questo:

@Componente({
 selettore: 'mia-app',
 indipendente, autonomo: VERO,
 modello: `
 Conteggio: {{ conteggio() }} </div>
 Doppio: {{ doppio() }} </div>
"cambiaConteggio()"></button>
`,
})
esportareclasse Componente app{
 conteggio = segnale(0)
 double = calcolato(() =>Questo.contare() * 2);

 cambiaConteggio() {
Questo.count.set(5)
 }
}

In questo componente dell'App, la variabile count è un segnale inizializzato con il valore zero. count viene quindi referenziato all'interno di double (un valore calcolato) e del modello. Quindi, quando il clic del pulsante imposta il valore di conteggio su cinque, sia il valore calcolato (doppio) che i valori nel modello verranno aggiornati.

Ogni parte del Componente angolare che dipende dal segnale verrà aggiornato automaticamente al variare del valore.

Perché l'introduzione dei segnali è importante

I segnali rendono più facile imparare e lavorare con Angular. Il passaggio ai segnali come nuovo modo predefinito per imparare e costruire con Angular armonizzerà il processo di apprendimento. Sia che preferiamo uno stile di codifica più imperativo con Angular, sia che desideriamo imparare uno stile di codifica più dichiarativo.

La maggior parte delle persone inizia a programmare in modo imperativo perché è generalmente più intuitivo e familiare alle persone. Ma passare dall'approccio imperativo a quello dichiarativo comporta un cambio di paradigma e un cambiamento totale del nostro modello mentale. Questo è il motivo per cui RX.js, la libreria reattiva, è difficile da imparare per molti.

I segnali riuniranno questi due approcci separati. Tutti possono apprendere i segnali per impostazione predefinita, iniziare ad apprendere i concetti alla base della reattività e non preoccuparsi nemmeno di incorporarli RX.js di Angular se non possono o non vogliono.

Una volta che ti senti a tuo agio con il basi di Angular e vuoi passare a uno stile di codifica più dichiarativo, puoi facilmente aggiungere RX.js ai concetti che già comprendi.

I segnali dovrebbero migliorare la programmazione angolare per tutti

Signals è il nuovo meccanismo reattivo di Angular che puoi utilizzare per creare valori reattivi che i consumatori possano leggere. Un segnale avvisa immediatamente tutti i consumatori quando il suo valore cambia. I segnali armonizzano il processo di apprendimento di Angular riunendo gli approcci imperativo e dichiarativo alla codifica.

Angular farà affidamento sui segnali per rendere il rilevamento delle modifiche più leggero e robusto. Pertanto, come sviluppatore angolare, imparare a usare i segnali ti darà una comprensione più solida della reattività in Angular e ti renderà uno sviluppatore migliore. Non dimenticare di padroneggiare le basi di Angular prima di apprendere le parti più avanzate.