Il tanto atteso React v18 è stato finalmente rilasciato alcuni mesi fa. Sebbene non ci siano stati grandi cambiamenti, sono state aggiunte alcune funzionalità interessanti che vale la pena dare un'occhiata. Questo articolo esaminerà alcune nuove aggiunte e come eseguire l'aggiornamento a React v18.

Come aggiornare a React 18

Per installare l'ultima versione di React esegui questo comando in un terminale:

npm installare reagire reagire-dom

O se stai usando il filato:

filato aggiungi reagisci reagisci-dom

Dopo aver installato l'ultima versione, puoi iniziare a sfruttare le sue nuove funzionalità.

Ci sono diverse aggiunte in React 18; eccone quattro tra le più degne di nota.

1. Modalità rigorosa

StrictMode è una funzionalità che puoi utilizzare per evidenziare potenziali problemi in un'applicazione. I controlli della modalità rigorosa vengono eseguiti solo in modalità di sviluppo e non influiranno sulla build di produzione. Tuttavia, possono essere molto utili per identificare potenziali problemi nel codice.

instagram viewer

Puoi abilitare la modalità rigorosa per qualsiasi parte della tua applicazione. Ad esempio, potresti abilitarlo per tutti i tuoi componenti o solo per alcuni di essi.

importare Reagire da 'reagire';
funzioneEsempio demo() {
Restituzione (
<div>
<Primo componente />
<Reagire. Modalità rigorosa>
<SecondoComponente />
<Terzo Componente />
</React.StrictMode>
<Quarto componente />
</div>
 );
}

Nel codice sopra, tutti e quattro i componenti verrebbero controllati per potenziali problemi. Tuttavia, i controlli della modalità rigorosa si applicheranno solo al e .

StrictMode aiuta anche in altri modi, ad esempio:

  • Identificazione dei componenti con cicli di vita non sicuri: Se un componente ha un metodo del ciclo di vita contrassegnato come non sicuro, la modalità rigorosa ti avviserà al riguardo.
  • Avviso sull'utilizzo dell'API di riferimento della stringa legacy: Se stai utilizzando l'API di riferimento della stringa legacy, la modalità rigorosa ti avviserà del suo utilizzo.
  • Avviso sull'utilizzo deprecato di findDOMNode: Se stai utilizzando l'API findDOMNode deprecata, la modalità rigorosa ti avviserà al riguardo.
  • Rilevazione di effetti collaterali imprevisti: Se un componente sta attivando effetti collaterali (come setState) in luoghi imprevisti, la modalità rigorosa ti avviserà al riguardo.
  • Rilevamento dell'API del contesto legacy: Se stai utilizzando l'API del contesto legacy (che ora è deprecata), la modalità rigorosa ti avviserà al riguardo.
  • Garantire lo stato riutilizzabile: Se si dispone di uno stato utilizzato da più componenti, la modalità rigorosa aiuterà a garantire che sia sincronizzato correttamente.

Nel complesso, la modalità rigorosa può essere una funzionalità utile in fase di sviluppo per aiutare a identificare potenziali problemi nel codice.

2. Transizioni

Le transizioni ti consentono di contrassegnare alcuni aggiornamenti dell'interfaccia utente come non urgenti. Ciò significa che React può dare la priorità ad altri aggiornamenti più importanti.

Ad esempio, se disponi di due campi di testo, uno per una query di ricerca e uno per i relativi risultati, contrassegnare il campo di testo dei risultati di ricerca come transizione. In questo modo, React sa che non è necessario eseguire nuovamente il rendering urgente di quel campo di testo ogni volta che l'utente digita qualcosa nel campo di testo della query di ricerca.

È possibile utilizzare la funzione startTransition per contrassegnare un aggiornamento dell'interfaccia utente come transizione. Ecco un esempio:

importare { inizioTransizione } da 'reagire';
startTransition(() => {
// Contrassegna eventuali aggiornamenti di stato non urgenti all'interno come transizioni
});

Questo codice contrassegnerebbe tutti gli aggiornamenti di stato all'interno della funzione startTransition come transizioni. In questo modo, React può concentrarsi su altri aggiornamenti dell'interfaccia utente più importanti.

3. Dosaggio automatico

React fornisce un'utile funzionalità chiamata batching che riduce il numero di re-rendering che si verificano quando uno stato cambia. Questo può essere molto utile per ottimizzare le prestazioni, in particolare quando lavorare con codice asincrono.

In precedenza, se avevi una promessa o stavi effettuando una chiamata di rete, gli aggiornamenti di stato non sarebbero stati raggruppati e React avrebbe dovuto eseguire nuovamente il rendering più volte. Tuttavia, con il batch automatico in React 18, tutti gli aggiornamenti di stato vengono raggruppati, anche all'interno di promesse, setTimeout e callback di eventi. Questo riduce significativamente il lavoro che React deve fare in background.

È possibile eseguire manualmente gli aggiornamenti dello stato in batch utilizzando la funzione flushSync, ma a partire da React 18, questo processo è ora automatico. Ciò si traduce in prestazioni molto migliori, poiché React attenderà il completamento di una microattività prima di eseguire nuovamente il rendering.

4. Nuovi ganci

La versione 18 introduce molte novità Reagire ganci, inclusi useId, useTransition e useDeferredValue. Questi nuovi Hooks forniscono un ottimo modo per aggiungere funzionalità extra alle tue app React con il minimo sforzo.

React 18 offre prestazioni dell'app migliorate

React 18 è qui e porta con sé alcuni grandi miglioramenti alle prestazioni delle app Web. Con la nuova versione di React, puoi creare facilmente app Web più reattive e con prestazioni complessive migliori. Quindi, se stai cercando di creare un'app Web che funzioni senza intoppi e abbia un bell'aspetto, assicurati di dare un'occhiata a React 18.