Nel marzo 2022, il team di React ha annunciato il rilascio ufficiale di React 18. Questa versione includeva una serie di nuove funzionalità orientate al miglioramento delle prestazioni, basate sul concetto di "rendering simultaneo". L'idea alla base del rendering simultaneo è rendere interrompibile il processo di rendering nel DOM.
Tra le nuove funzionalità ci sono cinque hook: useId, useTransition, useDerredValue, useSyncExternalStore e useInsertionEffect.
Reagisci usaTransition Hook
Per impostazione predefinita, tutti gli aggiornamenti dello stato React sono urgenti. Diversi aggiornamenti di stato nella tua applicazione competono per le stesse risorse, rallentandola. L'uso Transizione Gancio di reazione risolve questo problema consentendoti di contrassegnare alcuni aggiornamenti di stato come non urgenti. Ciò consente agli aggiornamenti di stato urgenti di interrompere quelli con una priorità inferiore.
Il componente SearchPage
Questo semplice programma imita un motore di ricerca che aggiorna due stati: un campo di input e alcuni risultati di ricerca.
importare {UsaStato} da "reagire";
funzionePagina di ricerca() {
const [input, setInput] = useState("")
cost [elenco, setList] = useState([]);cost listSize = 30000
funzionehandleChange(e) {
setInput(e.obbiettivo.valore);
cost listItem = [];per (permettere io = 0; i < listSize; i++){
Elementi della lista.spingere(e.obbiettivo.valore);
}setList (listItems);
}Restituzione (
<div>
<etichetta>Cercare in rete: </label>
<tipo di input="testo" valore={input} onChange={handleChange} />
{elenco.map((elemento, indice) => {
Restituzione <chiave div={indice}>{elemento}</div>
})}
</div>
);
}
esportarepredefinito Pagina di ricerca;
Il componente dell'app aggiornato
importare Pagina di ricerca da "./Componenti/Pagina di ricerca";funzioneApp() {
Restituzione (
<div>
< Pagina di ricerca/>
</div>
);
}
esportarepredefinito App;
Il codice sopra esegue il rendering di un'applicazione React con un campo di input:
Quando inizi a digitare i caratteri nel campo, di seguito verranno visualizzate 30.000 copie del testo digitato:
Se digiti più caratteri in rapida successione, dovresti individuare un ritardo. Influisce sul tempo impiegato dai caratteri per apparire sia nel campo di input che nell'"area dei risultati della ricerca". Questo perché React esegue entrambi gli aggiornamenti di stato contemporaneamente.
Se la demo viene eseguita troppo lentamente o troppo velocemente per te, prova a modificare il file listSize valore di conseguenza.
L'inserimento dell'hook useTransition nell'applicazione ti consentirà di dare la priorità a un aggiornamento di stato rispetto all'altro.
Usando il useTransition Hook
importare {useState, useTransition} da "reagire";funzionePagina di ricerca() {
cost [isPending, startTransition] = useTransition();
const [input, setInput] = useState("")
cost [elenco, setList] = useState([]);cost listSize = 30000
funzionehandleChange(e) {
setInput(e.obbiettivo.valore);
startTransition(() => {
cost listItem = [];per (permettere io = 0; i < listSize; i++){
Elementi della lista.spingere(e.obbiettivo.valore);
}setList (listItems);
});
}Restituzione (
<div>
<etichetta>Cercare in rete: </label>
<tipo di input="testo" valore={input} onChange={handleChange} />{È in sospeso? "...Caricamento dei risultati": list.map((elemento, indice) => {
Restituzione <chiave div={indice}>{elemento}</div>
})}
</div>
);
}
esportarepredefinito Pagina di ricerca;
Aggiornando il tuo Pagina di ricerca il componente con il codice sopra darà la priorità al campo di input rispetto all'"area dei risultati di ricerca". Questa semplice modifica ha un effetto chiaro: dovresti iniziare a vedere immediatamente il testo che digiti nel campo di input. Solo l'"area dei risultati di ricerca" avrà ancora un leggero ritardo. Ciò è dovuto al startTransitioninterfaccia di programmazione dell'applicazione (API) dal gancio useTransition.
Il codice che esegue il rendering dei risultati della ricerca nell'interfaccia utente ora utilizza il file startTransition API. Ciò consente al campo di input di interrompere l'aggiornamento dello stato dei risultati della ricerca. Quando il È in sospeso() la funzione visualizza “…Risultato caricamento” indica che è in corso una transizione (da uno stato al successivo).
Reagisci useDeferredValue Hook
L'hook useDeferredValue consente di posticipare il nuovo rendering di un aggiornamento dello stato non urgente. Come l'hook useTransition, l'hook useDeferredValue è un hook di concorrenza. L'hook useDeferredValue consente a uno stato di mantenere il suo valore originale mentre è in transizione.
Il componente SearchPage con l'hook useDeferredValue()
importare { useState, useTransition, useDeferredValue } da "reagire";funzionePagina di ricerca() {
cost [,startTransition] = useTransition();
const [input, setInput] = useState("")
cost [elenco, setList] = useState([]);cost listSize = 30000
funzionehandleChange(e) {
setInput(e.obbiettivo.valore);
startTransition(() => {
cost listItem = [];per (permettere io = 0; i < listSize; i++){
Elementi della lista.spingere(e.obbiettivo.valore);
}setList (listItems);
});
}
cost deferredValue = useDeferredValue (input);
Restituzione (
<div>
<etichetta>Cercare in rete: </label>
<tipo di input="testo" valore={input} onChange={handleChange} />{elenco.map((elemento, indice) => {
Restituzione <chiave div={indice} input={valore differito} >{elemento}</div>
})}
</div>
);
}
esportarepredefinito Pagina di ricerca;
Nel codice sopra vedrai che il È in sospeso() la funzione non esiste più. Questo perché il valore differito variabile dall'hook useDeferredValue sostituisce il È in sospeso() funzione durante la transizione di stato. Invece di aggiornare l'elenco dei risultati della ricerca quando si digita un nuovo carattere, manterrà i vecchi valori fino a quando l'applicazione non aggiornerà lo stato.
Reagisci useSyncExternalStore Hook
A differenza degli hook useTransition e useDeferredValue che funzionano con il codice dell'applicazione, useSyncExternalStore funziona con le librerie. Consente alla tua applicazione React di iscriversi e leggere dati da librerie esterne. L'hook useSyncExternalStore utilizza la seguente dichiarazione:
cost state = useSyncExternalStore (sottoscrivi, getSnapshot[, getServerSnapshot]);Questa firma contiene quanto segue:
- stato: il valore dell'archivio dati restituito dall'hook useSyncExternalStore.
- sottoscrivi: registra una richiamata quando l'archivio dati cambia.
- getSnapshot: restituisce il valore corrente del datastore.
- getServerSnapshot: restituisce lo snapshot utilizzato durante il rendering del server.
Con useSyncExternalStore, puoi iscriverti a un intero archivio dati oa un campo specifico all'interno di un archivio dati.
Reagire all'usoInsertionEffect Hook
L'hook useInsertionEffect è un altro nuovo hook React che funziona con le librerie. Tuttavia, invece degli archivi dati, l'hook useInsertionEffect funziona con le librerie CSS-in-JS. Questo hook risolve i problemi di prestazioni di rendering dello stile. Modella il DOM prima di leggere il layout nell'hook useLayoutEffect.
Reagisci useId Hook
Utilizzare l'hook useId in situazioni che richiedono ID univoci (tranne le chiavi in un elenco). Il suo scopo principale è generare ID che rimangono univoci tra client e server, evitando l'errore di mancata corrispondenza dell'idratazione del server React. L'hook useId usa la seguente dichiarazione:
cost id = useId()Nella dichiarazione id è una stringa univoca che include il : gettone. Dopo la dichiarazione, puoi passare il id variabile direttamente all'elemento o agli elementi che ne hanno bisogno.
Che valore aggiungono questi nuovi ganci per reagire?
Gli hook useTransition e useDeferredValue sono hook del codice dell'applicazione. Attraverso il rendering simultaneo, migliorano le prestazioni delle applicazioni. L'hook useId affronta l'errore di mancata corrispondenza dell'idratazione creando ID univoci tra client e server.
Gli hook useSyncExternalStore e useInsertionEffect funzionano con librerie esterne per facilitare il rendering simultaneo. L'hook useInsertionEffect funziona con le librerie CSS-in-JS. L'hook useSyncExternalStore funziona con librerie di datastore come Redux store.
Insieme, questi hook danno un notevole impulso alle prestazioni, che a sua volta migliora l'esperienza dell'utente.