Come migrare a React 18?

React 18  evolve il popolare framework dei componenti JavaScript con nuove funzionalità basate sul rendering e la pausa simultanei. Promette prestazioni migliori, più funzionalità e un’esperienza di sviluppo migliorata per le app che effettuano la transizione.

In questo articolo, ti mostreremo come aggiornare le basi di codice esistenti a React 18. Tieni presente che questa guida è solo una panoramica delle modifiche più ampiamente applicabili. La migrazione dovrebbe essere abbastanza indolore per i piccoli progetti che già seguono le migliori pratiche di React; grandi insiemi di componenti complessi possono causare alcuni problemi, che descriveremo in dettaglio di seguito.

Installazione di React 18

Prima di fare qualsiasi altra cosa, usa npm per aggiornare la dipendenza React del tuo progetto alla versione 18:

$ npm install react@latest react-dom@latest

La nuova versione non è tecnicamente incompatibile con le versioni precedenti. Nuove funzionalità sono attivate in abbonamento. Dal momento che non hai ancora modificato il codice, dovresti essere in grado di eseguire la tua applicazione e vedere che il rendering viene eseguito correttamente. Il tuo progetto funzionerà con il comportamento React 17 esistente.

$ npm start

Abilitazione delle funzionalità di React 18: Nuova API radice

L’uso di React 18 senza alcuna modifica alla codebase causerà un effetto collaterale: vedrai un avviso della console del browser ogni volta che l’applicazione viene montata in modalità di sviluppo.

ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17.

Questo messaggio di deprecazione può essere tranquillamente ignorato a meno che tu non sia pronto per aggiornare il tuo progetto. Se si desidera utilizzare le funzionalità di React 18, è necessario apportare la modifica in esso descritta. La vecchia ReactDOM.render()funzione è stata sostituita da una nuova API radice più orientata agli oggetti. Oltre a una maggiore facilità d’uso, attiva anche il sistema di rendering parallelo, che supporta tutte le nuove funzionalità del titolo.

Nel tuo file index.jso app.jstrova righe simili a queste:

Questo è un tipico punto di ingresso per un’applicazione React. Rende un’istanza del Appcomponente importato come elemento radice dell’applicazione. Il contenuto renderizzato viene archiviato come innerHTMLelemento HTML con estensione id="react".

Per passare all’API radice di React 18, sostituire il codice sopra con il seguente:

L’effetto è simile alla vecchia ReactDOM.render()API. Invece di inizializzare l’elemento radice e rendere la tua app come un’unica operazione imperativa, React 18 ti obbliga a creare prima l’oggetto radice e quindi a renderizzare il tuo contenuto in modo esplicito.

Quindi trova le posizioni nel codice in cui smonterai il nodo radice. Passa ReactDOM.unmountComponentAtNode()a un nuovo unmount()metodo sul tuo oggetto radice:

Sostituzione delle richiamate di rendering

ReactDOM.render()L’argomento di callback del metodo facoltativo non ha una controparte diretta nell’API radice di React 18. In precedenza, era possibile utilizzare questo codice per accedere Rendered!alla console dopo che React ha terminato il rendering del nodo radice:

Questa funzionalità è stata rimossa perché i tempi di callback sono imprevedibili quando si utilizzano le nuove funzionalità di idratazione parziale e rendering dei thread del server React 18. Se stai già utilizzando i callback di rendering e devi mantenere la compatibilità, puoi ottenere un comportamento simile utilizzando il meccanismo di collegamento:

React chiama i riferimenti alle funzioni durante il montaggio dei componenti. L’impostazione di un riferimento al componente che è il tuo nodo principale ti consente di determinare quando si verifica il rendering, fornendo un effetto simile al vecchio sistema di callback di rendering.

Problemi di aggiornamento del debug

La tua app dovrebbe ora renderizzare utilizzando le funzionalità di React 18 e senza alcun avviso della console. Testare a fondo l’applicazione per assicurarsi che tutto funzioni come previsto. Se trovi problemi, puoi risolverli con queste soluzioni generali.

Seleziona <modalità rigorosa>

Le app avvolte dai componenti <StrictMode>potrebbero comportarsi in modo diverso se renderizzate in modalità di progettazione React 18. Questo perché la modalità rigorosa ora controlla se la tua base di codice supporta lo stato riutilizzabile , un concetto che sarà completamente introdotto in React in una versione futura.

Lo stato riutilizzabile consente a React di ricablare un componente precedentemente rimosso, ripristinandone automaticamente l’ultimo stato. Ciò richiede che i tuoi componenti siano resistenti agli effetti di doppia chiamata. La modalità Strict ora ti aiuta a prepararti per il riutilizzo simulando il montaggio, lo smontaggio e il rimontaggio dei componenti ogni volta che vengono utilizzati, identificando eventuali problemi in cui lo stato precedente non può essere ripristinato. Puoi disabilitare la modalità rigorosa se rileva problemi nella tua applicazione o nelle sue dipendenze che non sei pronto ad affrontare.

Supporta l’aggiornamento dello stato batch

React 18 cambia il modo in cui gli aggiornamenti di stato vengono “impacchettati” per migliorare le prestazioni. Quando modifichi i valori di stato più volte in una funzione, React tenta di unirli in un unico re-rendering:

Questo meccanismo migliora l’efficienza, ma in precedenza funzionava solo all’interno dei gestori di eventi React. In React 18, funziona su tutti gli aggiornamenti di stato, anche se provengono da gestori di eventi nativi, timeout o promesse. Alcuni codici potrebbero comportarsi in modo diverso rispetto a prima se esegui aggiornamenti di stato sequenziali in una di queste posizioni.

Puoi disabilitare questo comportamento nelle situazioni in cui non sei pronto per il refactoring del codice. Avvolgi gli aggiornamenti di stato flushSync()per forzarli a impegnarsi immediatamente:

Smetti di usare le funzionalità rimosse e non supportate

Una volta presi in considerazione tutti gli aspetti di cui sopra, l’applicazione dovrebbe essere completamente compatibile con React 18. Sebbene siano ancora presenti alcune modifiche alla superficie dell’API , non dovrebbero influire sulla maggior parte delle applicazioni. Eccone alcuni di cui essere a conoscenza:

• unstable_changedBitsè stato rimosso: questa API non supportata ha consentito la disattivazione degli aggiornamenti contestuali. Non è più disponibile.
• Object.assign()Il polyfill è stato rimosso: è necessario aggiungere manualmente object-assignil pacchetto polyfill se è necessario supportare browser molto vecchi senza un built-in Object.assign().
• Internet Explorer non è più supportato – React ha ufficialmente interrotto la compatibilità con Internet Explorer fino alla fine del supporto per il browser a giugno. Non dovresti eseguire l’aggiornamento a React 18 se hai ancora bisogno che la tua applicazione funzioni in IE.
• L’uso di suspend con undefinedfallback è ora equivalente ai nulllimiti di sospensione precedentemente omessi fallback={undefined}, consentendo al codice di sovrapporsi al limite padre successivo nell’albero. React 18 ora rispetta i componenti di Suspense senza fallback.

Rendering lato server

Le applicazioni che utilizzano il rendering lato server richiederanno alcune modifiche in più per funzionare con React 18.

Secondo la nuova API root, dovresti sostituire la vecchia hydrate()funzione nel codice lato client con quella nuova hydrateRoot()fornita dal react-dom/clientpacchetto:

Nel codice lato server, sostituisci le chiamate API di rendering legacy con le loro controparti più recenti. Nella maggior parte dei casi, dovresti passare renderToNodeStream()a uno nuovo renderToReadableStream(). Le nuove API di streaming espongono le capacità di rendering del server di streaming di React 18, in cui il server può continuare a fornire nuovo HTML al browser dopo che l’app è stata inizialmente renderizzata.

Inizia a utilizzare le funzionalità di React 18

Ora che hai aggiornato, puoi iniziare a rendere la tua app più potente incorporando le funzionalità di React 18. L’uso della concorrenza da parte di React significa che il rendering dei componenti può essere interrotto, aprendo nuove possibilità e interfacce utente più reattive.

Alcune delle funzionalità aggiunte includono importanti aggiornamenti di Suspense, un modo per dare priorità agli aggiornamenti di stato utilizzando Transitions e un meccanismo integrato per limitare i re-render causati da aggiornamenti non urgenti ma frequenti. Ci sono anche alcune modifiche e miglioramenti vari: puoi tornare undefinedda render()un metodo componente, l’avviso sulla chiamata di setState()componenti non cablati è stato rimosso e alcuni nuovi attributi HTML come imageSizes, imageSrcSet, e sono aria-descriptionriconosciuti dal renderer React DOM.

Riepilogo

React 18 è stabile e pronto all’uso. Nella maggior parte dei casi, il processo di aggiornamento dovrebbe essere rapido e semplice, richiedendo solo un aggiornamento di npm e un passaggio alla nuova API radice. Tuttavia, dovresti comunque testare tutti i tuoi componenti: potrebbero comportarsi in modo diverso in alcune situazioni, ad esempio in modalità rigorosa o quando viene applicato il confezionamento automatico.

Questa nuova versione indica la direzione futura di React come framework ad alte prestazioni per tutti i tipi di applicazioni web. Estende inoltre le capacità di rendering lato server di React aggiungendo la pausa lato server e la possibilità di continuare a trasmettere contenuti agli utenti dopo il rendering iniziale. Ciò offre agli sviluppatori una maggiore flessibilità per distribuire il rendering sia sul client che sul server.