Im März 2022 gab das React-Team die offizielle Veröffentlichung von React 18 bekannt. Diese Version enthielt eine Vielzahl neuer Funktionen zur Leistungsverbesserung, basierend auf dem Konzept des „gleichzeitigen Renderns“. Die Idee hinter dem gleichzeitigen Rendern besteht darin, den Vorgang des Renderns in das DOM unterbrechbar zu machen.
Zu den neuen Features gehören fünf Hooks: useId, useTransition, useDerredValue, useSyncExternalStore und useInsertionEffect.
Reagieren Sie mit Transition Hook
Standardmäßig sind alle React-Statusaktualisierungen dringend. Verschiedene Zustandsaktualisierungen in Ihrer Anwendung konkurrieren um dieselben Ressourcen und verlangsamen sie. Die useTransition Haken reagieren löst dieses Problem, indem Sie einige Statusaktualisierungen als nicht dringend markieren können. Dadurch können dringende Zustandsaktualisierungen diejenigen mit niedrigerer Priorität unterbrechen.
Die SearchPage-Komponente
Dieses einfache Programm imitiert eine Suchmaschine, die zwei Zustände aktualisiert – ein Eingabefeld und einige Suchergebnisse.
importieren { useState } aus "reagieren";
FunktionSuchseite() {
const [Eingabe, setInput] = useState("")
konst [aufführen, setList] = useState([]);konst Listengröße = 30000
FunktionhandleChange(e) {
setEingabe(e.Ziel.Wert);
konst listItems = [];zum (Lassen ich = 0; i
listItems.drücken(e.Ziel.Wert);
}setList (listItems);
}Rückkehr (
<div>
<Etikett>Durchsuche das Web: </label>
<Eingabetyp="Text" value={input} onChange={handleChange} />
{aufführen.map((Element, Index) => {
Rückkehr <div key={index}>{Artikel}</div>
})}
</div>
);
}
ExportUrsprünglich Suchseite;
Die aktualisierte App-Komponente
importieren Suchseite aus "./Komponenten/Suchseite";FunktionApp() {
Rückkehr (
<div>
< Suchseite/>
</div>
);
}
ExportUrsprünglich Anwendung;
Der obige Code rendert eine React-Anwendung mit einem Eingabefeld:
Wenn Sie beginnen, Zeichen in das Feld einzugeben, werden unten 30.000 Kopien des eingegebenen Textes angezeigt:
Wenn Sie mehrere Zeichen schnell hintereinander eingeben, sollten Sie eine Verzögerung feststellen. Es wirkt sich auf die Zeit aus, die Zeichen benötigen, um sowohl im Eingabefeld als auch im „Suchergebnisbereich“ zu erscheinen. Dies liegt daran, dass React beide Statusaktualisierungen gleichzeitig ausführt.
Wenn die Demo für Sie zu langsam oder zu schnell läuft, versuchen Sie, die zu optimieren Listengröße Wert entsprechend.
Durch Einfügen des useTransition-Hooks in die Anwendung können Sie eine Statusaktualisierung gegenüber der anderen priorisieren.
Verwenden des useTransition-Hooks
importieren {useState, useTransition} aus "reagieren";FunktionSuchseite() {
konst [isPending, startTransition] = useTransition();
const [Eingabe, setInput] = useState("")
konst [aufführen, setList] = useState([]);konst Listengröße = 30000
FunktionhandleChange(e) {
setEingabe(e.Ziel.Wert);
StartÜbergang(() => {
konst listItems = [];zum (Lassen ich = 0; i
listItems.drücken(e.Ziel.Wert);
}setList (listItems);
});
}Rückkehr (
<div>
<Etikett>Durchsuche das Web: </label>
<Eingabetyp="Text" value={input} onChange={handleChange} />{ausstehend? "...Ergebnisse werden geladen": list.map((Element, Index) => {
Rückkehr <div key={index}>{Artikel}</div>
})}
</div>
);
}
ExportUrsprünglich Suchseite;
Aktualisieren Sie Ihre Suchseite Die Komponente mit dem obigen Code priorisiert das Eingabefeld gegenüber dem „Suchergebnisbereich“. Diese einfache Änderung hat einen klaren Effekt: Sie sollten den Text, den Sie in das Eingabefeld eingeben, sofort sehen. Lediglich der „Suchergebnisbereich“ hat noch eine leichte Verzögerung. Dies liegt an der startÜbergangAnwendungsprogrammierschnittstelle (API) aus dem useTransition-Hook.
Der Code, der die Suchergebnisse für die Benutzeroberfläche rendert, verwendet jetzt die startÜbergang API. Dadurch kann das Eingabefeld die Statusaktualisierung der Suchergebnisse unterbrechen. Wenn der ist ausstehend () Die Funktion zeigt „…Loading result“ an. Dies zeigt an, dass ein Übergang (von einem Zustand zum nächsten) stattfindet.
Reagieren Sie mit useDeferredValue Hook
Mit dem Hook useDeferredValue können Sie das erneute Rendern einer nicht erzwungenen Zustandsaktualisierung verschieben. Wie der useTransition-Hook ist der useDeferredValue-Hook ein Nebenläufigkeits-Hook. Der useDeferredValue-Hook ermöglicht es einem Zustand, seinen ursprünglichen Wert während des Übergangs beizubehalten.
Die SearchPage-Komponente mit dem useDeferredValue()-Hook
importieren { useState, useTransition, useDeferredValue } aus "reagieren";FunktionSuchseite() {
konst [,startTransition] = useTransition();
const [Eingabe, setInput] = useState("")
konst [aufführen, setList] = useState([]);konst Listengröße = 30000
FunktionhandleChange(e) {
setEingabe(e.Ziel.Wert);
StartÜbergang(() => {
konst listItems = [];zum (Lassen ich = 0; i
listItems.drücken(e.Ziel.Wert);
}setList (listItems);
});
}
konst deferredValue = useDeferredValue (Eingabe);
Rückkehr (
<div>
<Etikett>Durchsuche das Web: </label>
<Eingabetyp="Text" value={input} onChange={handleChange} />{aufführen.map((Element, Index) => {
Rückkehr <div key={index} input={deferredValue} >{Artikel}</div>
})}
</div>
);
}
ExportUrsprünglich Suchseite;
Im obigen Code sehen Sie, dass die ist ausstehend () Funktion nicht mehr vorhanden. Dies liegt daran, dass die aufgeschobenerWert Variable aus dem useDeferredValue-Hook ersetzt die ist ausstehend () Funktion während des Zustandsübergangs. Anstatt dass die Suchergebnisliste aktualisiert wird, wenn Sie ein neues Zeichen eingeben, behält sie ihre alten Werte bei, bis die Anwendung den Status aktualisiert.
Reagieren Sie mit useSyncExternalStore Hook
Im Gegensatz zu den Hooks useTransition und useDeferredValue, die mit Anwendungscode arbeiten, arbeitet useSyncExternalStore mit Bibliotheken. Es ermöglicht Ihrer React-Anwendung, Daten aus externen Bibliotheken zu abonnieren und zu lesen. Der Hook useSyncExternalStore verwendet die folgende Deklaration:
konst state = useSyncExternalStore (abonnieren, getSnapshot[, getServerSnapshot]);Diese Signatur enthält Folgendes:
- Zustand: Der Wert des Datenspeichers, den der useSyncExternalStore-Hook zurückgibt.
- Abonnieren: Registriert einen Rückruf, wenn sich der Datenspeicher ändert.
- getSnapshot: Gibt den aktuellen Wert des Datenspeichers zurück.
- getServerSnapshot: Gibt den Snapshot zurück, der während des Server-Renderings verwendet wird.
Mit useSyncExternalStore können Sie einen gesamten Datenspeicher oder ein bestimmtes Feld innerhalb eines Datenspeichers abonnieren.
Reagieren Sie mit InsertionEffect Hook
Der useInsertionEffect-Hook ist ein weiterer neuer React-Hook, der mit Bibliotheken funktioniert. Anstelle von Datenspeichern funktioniert der useInsertionEffect-Hook jedoch mit CSS-in-JS-Bibliotheken. Dieser Hook behebt Leistungsprobleme beim Style-Rendering. Es formatiert das DOM, bevor es das Layout im useLayoutEffect-Hook liest.
useId Hook reagieren
Sie verwenden den useId-Hook in Situationen, die eindeutige IDs erfordern (außer Schlüssel in einer Liste). Sein Hauptzweck besteht darin, IDs zu generieren, die über Client und Server hinweg eindeutig bleiben, wodurch der Hydration-Mismatch-Fehler des React-Servers vermieden wird. Der useId-Hook verwendet die folgende Deklaration:
konst id = useId()In der Deklaration Ich würde ist eine eindeutige Zeichenfolge, die die enthält : Zeichen. Nach der Deklaration können Sie die bestehen Ich würde Variable direkt zu den Elementen, die sie benötigen.
Welchen Mehrwert bieten diese neuen Hooks für React?
Die Hooks useTransition und useDeferredValue sind Anwendungscode-Hooks. Durch paralleles Rendern verbessern sie die Leistung von Anwendungen. Der useId-Hook behebt den Hydration-Mismatch-Fehler, indem er eindeutige IDs für Client und Server erstellt.
Die Hooks useSyncExternalStore und useInsertionEffect arbeiten mit externen Bibliotheken zusammen, um das Rendern von Parallelität zu erleichtern. Der Hook useInsertionEffect funktioniert mit CSS-in-JS-Bibliotheken. Der Hook useSyncExternalStore funktioniert mit Datenspeicherbibliotheken wie Redux Store.
Zusammen sorgen diese Hooks für einen erheblichen Leistungsschub, was wiederum die Benutzererfahrung verbessert.