In maart 2022 kondigde het React-team de officiële release van React 18 aan. Deze release kwam met een groot aantal nieuwe functies gericht op prestatieverbetering, gebaseerd op het concept van "concurrent rendering". Het idee achter gelijktijdige weergave is om het proces van weergave naar de DOM onderbreekbaar te maken.
Onder de nieuwe functies zijn vijf hooks: useId, useTransition, useDerredValue, useSyncExternalStore en useInsertionEffect.
Reageren gebruik Transition Hook
Standaard zijn alle React-statusupdates urgent. Verschillende statusupdates in uw toepassing strijden om dezelfde bronnen, waardoor het langzamer gaat. Het gebruikOvergang Reageerhaak lost dit probleem op door u sommige statusupdates als niet-dringend te laten markeren. Hierdoor kunnen urgente statusupdates die met een lagere prioriteit onderbreken.
De zoekpagina-component
Dit eenvoudige programma imiteert een zoekmachine die twee statussen bijwerkt: een invoerveld en enkele zoekresultaten.
importeren { useState } van "Reageer";
functieZoekpagina() {
const [input, setInput] = useState("")
const [lijst, setList] = useState([]);const lijstgrootte = 30000
functiehandvatWijzigen(e) {
setInvoer(e.doelwit.waarde);
const lijstitems = [];voor (laten ik = 0; ik < lijstgrootte; ik++){
lijstitems.duw(e.doelwit.waarde);
}setList (lijstitems);
}opbrengst (
<div>
<label>Zoeken op het internet: </label>
<invoertype="tekst" value={input} onChange={handleChange} />
{lijst.map((item, index) => {
opbrengst <div-sleutel={index}>{item}</div>
})}
</div>
);
}
exporterenstandaard Zoekpagina;
De bijgewerkte app-component
importeren Zoekpagina van "./Componenten/Zoekpagina";functieApp() {
opbrengst (
<div>
< Zoekpagina/>
</div>
);
}
exporterenstandaard App;
De bovenstaande code geeft een React-toepassing weer met een invoerveld:
Als u tekens in het veld begint te typen, verschijnen hieronder 30.000 exemplaren van de getypte tekst:
Als u meerdere tekens snel achter elkaar typt, moet u een vertraging opmerken. Het heeft invloed op de tijd die tekens nodig hebben om zowel in het invoerveld als in het "zoekresultaatgebied" te verschijnen. Dit komt omdat React beide statusupdates tegelijkertijd uitvoert.
Als de demo te langzaam of te snel voor je loopt, probeer dan de lijstgrootte waarde dienovereenkomstig.
Door de useTransition-hook in de toepassing in te voegen, kunt u prioriteit geven aan de ene statusupdate boven de andere.
De useTransition Hook gebruiken
importeren {useState, useTransition} van "Reageer";functieZoekpagina() {
const [isPending, startTransition] = useTransition();
const [input, setInput] = useState("")
const [lijst, setList] = useState([]);const lijstgrootte = 30000
functiehandvatWijzigen(e) {
setInvoer(e.doelwit.waarde);
startOvergang(() => {
const lijstitems = [];voor (laten ik = 0; ik < lijstgrootte; ik++){
lijstitems.duw(e.doelwit.waarde);
}setList (lijstitems);
});
}opbrengst (
<div>
<label>Zoeken op het internet: </label>
<invoertype="tekst" value={input} onChange={handleChange} />{is in afwachting van? "...Bezig met laden van resultaten": lijst.map((item, index) => {
opbrengst <div-sleutel={index}>{item}</div>
})}
</div>
);
}
exporterenstandaard Zoekpagina;
Uw bijwerken Zoekpagina component met de bovenstaande code geeft prioriteit aan het invoerveld boven het "zoekresultaatgebied". Deze eenvoudige wijziging heeft een duidelijk effect: u zou de tekst die u in het invoerveld typt onmiddellijk moeten zien. Alleen het "zoekresultaatgebied" heeft nog een kleine vertraging. Dit komt door de startOvergangapplicatie programmeerinterface (API) van de useTransition-hook.
De code die de zoekresultaten naar de gebruikersinterface weergeeft, gebruikt nu de startOvergang API. Hierdoor kan het invoerveld de statusupdate van de zoekresultaten onderbreken. Wanneer de is in afwachting van() functie geeft "... resultaat laden" weer, dit geeft aan dat er een overgang (van de ene toestand naar de volgende) plaatsvindt.
Reageer gebruikDeferredValue Hook
Met de useDeferredValue-hook kunt u het opnieuw weergeven van een niet-aangedrongen statusupdate uitstellen. Net als de useTransition-hook, is de useDeferredValue-hook een concurrency-hook. Met de useDeferredValue-hook kan een staat zijn oorspronkelijke waarde behouden terwijl deze in transitie is.
De SearchPage-component met de useDeferredValue() Hook
importeren { useState, useTransition, useDeferredValue } van "Reageer";functieZoekpagina() {
const [,startTransition] = useTransition();
const [input, setInput] = useState("")
const [lijst, setList] = useState([]);const lijstgrootte = 30000
functiehandvatWijzigen(e) {
setInvoer(e.doelwit.waarde);
startOvergang(() => {
const lijstitems = [];voor (laten ik = 0; ik < lijstgrootte; ik++){
lijstitems.duw(e.doelwit.waarde);
}setList (lijstitems);
});
}
const deferredValue = useDeferredValue (invoer);
opbrengst (
<div>
<label>Zoeken op het internet: </label>
<invoertype="tekst" value={input} onChange={handleChange} />{lijst.map((item, index) => {
opbrengst <div key={index} input={deferredValue} >{item}</div>
})}
</div>
);
}
exporterenstandaard Zoekpagina;
In de code hierboven zie je dat de is in afwachting van() functie bestaat niet meer. Dit komt omdat de uitgestelde waarde variabele van de useDeferredValue hook vervangt de is in afwachting van() functie tijdens toestandsovergang. In plaats van dat de lijst met zoekresultaten wordt vernieuwd wanneer u een nieuw teken typt, behoudt deze zijn oude waarden totdat de toepassing de status bijwerkt.
Reageren useSyncExternalStore Hook
In tegenstelling tot de hooks useTransition en useDeferredValue die werken met toepassingscode, werkt useSyncExternalStore met bibliotheken. Hiermee kan uw React-toepassing zich abonneren op en gegevens lezen van externe bibliotheken. De useSyncExternalStore hook gebruikt de volgende declaratie:
const state = useSyncExternalStore (abonneren, getSnapshot[, getServerSnapshot]);Deze handtekening bevat het volgende:
- staat: de waarde van het gegevensarchief dat de hook useSyncExternalStore retourneert.
- abonneren: registreert een terugbelverzoek wanneer de gegevensopslag verandert.
- getSnapshot: retourneert de huidige waarde van de gegevensopslag.
- getServerMomentopname: retourneert de momentopname die wordt gebruikt tijdens het renderen van de server.
Met useSyncExternalStore kunt u zich abonneren op een hele datastore of een specifiek veld binnen een datastore.
Reageren gebruikInsertionEffect Hook
De useInsertionEffect-hook is een andere nieuwe React-hook die met bibliotheken werkt. In plaats van gegevensopslag werkt de useInsertionEffect-hook echter met CSS-in-JS-bibliotheken. Deze hook lost prestatieproblemen met stijlweergave op. Het stylet de DOM voordat de lay-out wordt gelezen in de useLayoutEffect hook.
Reageren useId Hook
U gebruikt de useId-hook in situaties die unieke ID's vereisen (behalve sleutels in een lijst). Het belangrijkste doel is om ID's te genereren die uniek blijven voor client en server, waardoor de React-server-hydratatie-mismatch-fout wordt vermeden. De useId hook gebruikt de volgende declaratie:
const id = useId()In de aangifte ID kaart is een unieke tekenreeks die de. bevat : token. Na aangifte kunt u de ID kaart variabele direct naar het element of de elementen die het nodig hebben.
Welke waarde voegt deze nieuwe haken toe om te reageren?
De haken useTransition en useDeferredValue zijn haken voor toepassingscodes. Door gelijktijdige weergave verbeteren ze de prestaties van applicaties. De useId-hook pakt de hydratatiemismatch-fout aan door unieke ID's te maken voor client en server.
De hooks useSyncExternalStore en useInsertionEffect werken met externe bibliotheken om gelijktijdige weergave te vergemakkelijken. De useInsertionEffect hook werkt met CSS-in-JS-bibliotheken. De useSyncExternalStore hook werkt met datastorebibliotheken zoals Redux store.
Samen geven deze hooks een grote boost aan de prestaties, wat op zijn beurt de gebruikerservaring verbetert.
