Novità di React 18: funzionalità chiave da provare

React è una libreria JavaScript open source molto popolare creata da Facebook nel 2013. Grazie alla sua flessibilità, molti sviluppatori sfruttano alcune delle sue funzionalità per creare componenti dell'interfaccia utente (UI) veloci, efficienti e riutilizzabili.

Nel marzo 2022, il team ha lanciato la versione più recente e attesa della libreria React, React 18, che include nuove funzionalità incentrate sul miglioramento delle prestazioni dell'applicazione.

Le nuove funzionalità di React 18

React 18 consiste in alcune utili nuove funzionalità aggiunte al libreria JavaScript open source. Molte di queste modifiche non erano presenti nella versione precedente, mentre altre funzionalità sono state migliorate. Alcune di queste funzionalità includono; una nuova API root, Batching automatico, API Transition, API Suspense e il rilascio di nuovi Hooks.

Nuova API radice

L'API root in React tiene traccia di come viene visualizzato il componente di primo livello nell'albero. Nelle versioni precedenti di React, il

rendere Il metodo è stato utilizzato per eseguire il rendering che ora è chiamato API radice legacy.

Tuttavia, React 18 viene fornito con una nuova API root che crea una root utilizzando il file createRoot metodo e quindi esegue il rendering di un componente React alla radice creata utilizzando il rendere metodo.

Questa nuova API root ti darà accesso alle funzionalità di questa versione recente, come la funzionalità dell'API di transizione discussa in seguito. Mentre il vecchio modo funzionerà ancora in React 18, potrebbe essere gradualmente eliminato in futuro.

Lo snippet seguente mostra come è strutturata l'API root sia nel modo precedente che in quello nuovo.

API radice legacy

importare Reagire DOM da'reagire';
importare App da'./App';
ReactDOM.render(<App />, documento.getElementById('app'))

Nuova API radice

importare Reagire DOM da'react-dom/cliente';
importare App da'./App';
cost root = ReactDOM.createRoot(documento.getElementById('app'));
root.render(<App />)

Dosaggio automatico

Il batch in React comporta più aggiornamenti di stato in un singolo re-rendering su ogni evento del browser, ad esempio a fare clic sull'evento. Eventuali modifiche di stato che si sono verificate al di fuori di un evento come una promessa o una richiamata non verranno raggruppate.

Con React 18, gli aggiornamenti dello stato del batch vengono eseguiti automaticamente indipendentemente da dove si verificano questi aggiornamenti. Questa funzione fornisce un miglioramento immediato delle prestazioni e dei tempi di rendering. Tuttavia, se si dispone di uno stato del componente che non si desidera venga raggruppato, è possibile disattivarlo utilizzando il file flushSync metodo. Di seguito è riportato un frammento di esempio su come può essere fatto;

importare { flushSync } da'reagire';
funzionemanigliaClic() {
 flushSync(() => {
 impostaConteggio(contare => contare + 1);
]});
 flushSync(() => {
 setStore(negozio => !negozio);
});
}

API di transizione

In React, gli aggiornamenti effettuati nell'interfaccia utente possono essere classificati come aggiornamenti urgenti e di transizione chiamati anche non urgenti. Un esempio di aggiornamento urgente può essere un caso di inserimento di un testo in un campo mentre quello di un aggiornamento di transizione potrebbe essere una funzionalità di filtraggio della ricerca.

Ora, se tali aggiornamenti si verificano contemporaneamente, questa potrebbe essere definita un'operazione pesante e potrebbe portare al blocco dell'applicazione. Per risolvere questo problema, è qui che l'API di transizione ha chiamato il file startTransition viene a giocare. Questa nuova funzionalità indica a React quali aggiornamenti devono essere contrassegnati come "transizioni" migliorando a loro volta le interazioni degli utenti. Ecco un esempio di codice di come funziona;

importare { inizioTransizione } da"reagire";
inizioTransizione(() => {
 setSearch (input);
});

Suspense

Quando viene eseguito il rendering di un'applicazione sul server, al browser viene restituito un file HTML statico che consente all'utente di vedere l'aspetto dell'app durante il caricamento di JavaScript. Quando il file viene caricato, l'HTML diventa dinamico con ciò che è noto come idratazione. Il difetto qui è che se tutti questi non sono a posto, la tua applicazione non diventerebbe interattiva.

Per risolvere questo problema, React 18 fornisce due nuove funzionalità di rendering lato server (SSR) utilizzando il Suspense componente;

• Lo streaming HTML consente di inviare parti di un componente man mano che vengono renderizzate.
• L'idratazione selettiva dà la priorità all'interattività dei componenti selezionati da un utente.

Nuovi ganci

Un grande punto di svolta per React è stata l'introduzione di hook in React versione 16 che consente ai componenti delle funzioni di accedere agli stati e ad altre funzionalità di React senza scrivere classi. Il React 18 viene fornito con cinque nuovi hook per migliorare l'esperienza degli sviluppatori;

• useId: questo hook ci consente di creare un identificatore univoco (ID) nella nostra applicazione sia sul server che sul client.
• useTransition: viene utilizzato insieme startTransition per creare un nuovo aggiornamento di stato che può essere definito non urgente.
• useDefferedValue: consente di rinviare gli aggiornamenti meno urgenti.
• useSyncExternalStore: questo hook è utile quando si implementano sottoscrizioni a origini dati esterne.
• useInsertionEffect: questo hook è limitato agli autori di librerie CSS-in-JS per l'inserimento di stili nel DOM.

Come aggiornare a React 18

Per eseguire un aggiornamento, è possibile utilizzare il gestore di pacchetti npm o filato eseguendo il seguente comando nel terminale.

npm installare reagire reagire-dom

O

filato aggiungere reagire reagire-dom 

Quindi, dovrai apportare una modifica al file index.js file nella directory radice della cartella del progetto dall'API legacy alla nuova API root come mostrato in precedenza.

Come impostare un nuovo progetto React 18

Per configurare un nuovo progetto React 18, il pacchetto create-react-app viene installato con npm o yarn nel terminale;

npx creare-react-app mia-react-app

O

filato aggiungere creare-react-app mia-react-app

Migliora le prestazioni delle tue applicazioni con React 18

Ora conosci alcune nuove funzionalità di React 18 come la nuova API root, Suspense, Transition o Batching automatico e come eseguire l'upgrade a questa nuova versione e configurarla da zero.

Queste recenti modifiche a React sono pronte per essere sperimentate in questo momento.