Naučte se používat háky React 18

V březnu 2022 tým React oznámil oficiální vydání React 18. Tato verze přišla s řadou nových funkcí zaměřených na zlepšení výkonu na základě konceptu „souběžného vykreslování“. Myšlenkou souběžného vykreslování je zajistit, aby byl proces vykreslování do DOM přerušitelný.

Mezi nové funkce patří pět háčků: useId, useTransition, useDerredValue, useSyncExternalStore a useInsertionEffect.

Reagovat useTransition Hook

Ve výchozím nastavení jsou všechny aktualizace stavu React urgentní. Různé aktualizace stavu ve vaší aplikaci soutěží o stejné zdroje, čímž ji zpomalují. UseTransition Reagovat háček řeší tento problém tím, že vám umožňuje označit některé aktualizace stavu jako nenaléhavé. To umožňuje naléhavým aktualizacím stavu přerušit ty s nižší prioritou.

Komponenta SearchPage

Tento jednoduchý program napodobuje vyhledávač, který aktualizuje dva stavy – vstupní pole a některé výsledky vyhledávání.

import { useState } z "reagovat";
funkceVyhledávací stránka() {
 const [input, setInput] = useState(""





instagram viewer
)
konst [seznam, setList] = useState([]);
konst velikost seznamu = 30000
funkcerukojeťZměnit(E) {
setInput(E.cílová.hodnota);
konst listItems = [];
pro (nechat i = 0; i < listVelikost; i++){
seznam položek.TLAČIT(E.cílová.hodnota);
 }
setList (listItems);
 }
vrátit se (
<div>
<označení>Prohledat internet: </label>
<typ vstupu="text" value={input} onChange={handleChange} />
{seznam.map((položka, index) => {
 vrátit se <div key={index}>{položka}</div>
 })}
</div>
 );
}
vývoznívýchozí SearchPage;

Aktualizovaná komponenta aplikace

import Vyhledávací stránka z "./Components/SearchPage";
funkceAplikace() {
vrátit se (
<div>
< Vyhledávací stránka/>
</div>
 );
}
vývoznívýchozí Aplikace;

Výše uvedený kód vykreslí aplikaci React se vstupním polem:

Jakmile začnete do pole psát znaky, zobrazí se níže 30 000 kopií napsaného textu:

Pokud napíšete několik znaků rychle za sebou, měli byste zaznamenat zpoždění. Ovlivňuje dobu, po kterou se znaky objeví jak ve vstupním poli, tak v „oblasti výsledků vyhledávání“. Je to proto, že React spouští obě aktualizace stavu současně.

Pokud vám demo běží příliš pomalu nebo příliš rychle, zkuste jej vyladit listSize hodnotu odpovídajícím způsobem.

Vložení háčku useTransition do aplikace vám umožní upřednostnit jednu aktualizaci stavu před druhou.

Pomocí useTransition Hook

import {useState, useTransition} z "reagovat";
funkceVyhledávací stránka() {
konst [isPending, startTransition] = useTransition();
 const [input, setInput] = useState("")
konst [seznam, setList] = useState([]);
konst velikost seznamu = 30000
funkcerukojeťZměnit(E) {
setInput(E.cílová.hodnota);
 startTransition(() => {
konst listItems = [];
pro (nechat i = 0; i < listVelikost; i++){
seznam položek.TLAČIT(E.cílová.hodnota);
 }
setList (listItems);
 });
 }
vrátit se (
<div>
<označení>Prohledat internet: </label>
<typ vstupu="text" value={input} onChange={handleChange} />
{isPending? "...Načítání výsledků": seznam.map((položka, rejstřík) => {
 vrátit se <div key={index}>{položka}</div>
 })}
</div>
 );
}
vývoznívýchozí SearchPage;

Aktualizace vašeho Vyhledávací stránka komponenta s výše uvedeným kódem upřednostní vstupní pole před „oblastí výsledků vyhledávání“. Tato jednoduchá změna má jasný efekt: text, který zadáte do vstupního pole, byste měli začít vidět okamžitě. Pouze „oblast výsledků vyhledávání“ bude mít stále mírné zpoždění. To je způsobeno tím startTransitionrozhraní pro programování aplikací (API) z háčku useTransition.

Kód, který vykresluje výsledky vyhledávání do uživatelského rozhraní, nyní používá startTransition API. To umožňuje vstupnímu poli přerušit aktualizaci stavu výsledků vyhledávání. Když isPending() funkce zobrazí „...Načítání výsledku“, což znamená, že probíhá přechod (z jednoho stavu do druhého).

Reagovat useDeferredValue Hook

Háček useDeferredValue vám umožňuje odložit opětovné vykreslení nevyžádané aktualizace stavu. Stejně jako háček useTransition je háček useDeferredValue háčkem souběžnosti. Háček useDeferredValue umožňuje stavu zachovat si původní hodnotu, když je v přechodu.

Komponenta SearchPage s háčkem useDeferredValue().

import { useState, useTransition, useDeferredValue} z "reagovat";
funkceVyhledávací stránka() {
konst [,startTransition] = useTransition();
 const [input, setInput] = useState("")
konst [seznam, setList] = useState([]);
konst velikost seznamu = 30000
funkcerukojeťZměnit(E) {
setInput(E.cílová.hodnota);
 startTransition(() => {
konst listItems = [];
pro (nechat i = 0; i < listVelikost; i++){
seznam položek.TLAČIT(E.cílová.hodnota);
 }
setList (listItems);
 });
 }
konst deferredValue = useDeferredValue (vstup);
vrátit se (
<div>
<označení>Prohledat internet: </label>
<typ vstupu="text" value={input} onChange={handleChange} />
{seznam.map((položka, index) => {
 vrátit se <div key={index} input={deferredValue} >{položka}</div>
 })}
</div>
 );
}
vývoznívýchozí SearchPage;

Ve výše uvedeném kódu uvidíte, že isPending() funkce již neexistuje. Je to proto, že deferredValue proměnná z háčku useDeferredValue nahrazuje proměnnou isPending() funkce při přechodu stavu. Místo toho, aby se seznam výsledků vyhledávání obnovoval při psaní nového znaku, zachová si své staré hodnoty, dokud aplikace neaktualizuje stav.

Reagovat useSyncExternalStore Hook

Na rozdíl od háčků useTransition a useDeferredValue, které pracují s kódem aplikace, useSyncExternalStore pracuje s knihovnami. Umožňuje vaší aplikaci React přihlásit se k odběru a číst data z externích knihoven. Hák useSyncExternalStore používá následující deklaraci:

konst state = useSyncExternalStore (subscribe, getSnapshot[, getServerSnapshot]);

Tento podpis obsahuje následující:

• Stát: hodnota úložiště dat, kterou vrací háček useSyncExternalStore.
• předplatit: registruje zpětné volání při změně úložiště dat.
• getSnapshot: vrací aktuální hodnotu datového úložiště.
• getServerSnapshot: vrátí snímek použitý během vykreslování serveru.

Pomocí useSyncExternalStore se můžete přihlásit k odběru celého úložiště dat nebo konkrétního pole v úložišti dat.

Reagovat useInsertionEffect Hook

Háček useInsertionEffect je další nový háček React, který pracuje s knihovnami. Namísto datových úložišť však hák useInsertionEffect pracuje s knihovnami CSS-in-JS. Tento háček řeší problémy s výkonem vykreslování stylu. Před čtením rozvržení v háku useLayoutEffect upraví styl DOM.

Reagovat useId Hook

Háček useId použijete v situacích, které vyžadují jedinečné ID (kromě klíčů v seznamu). Jeho hlavním účelem je generovat ID, která zůstanou jedinečná napříč klientem a serverem, čímž se zabrání chybě nesouladu hydratace serveru React. Hák useId používá následující deklaraci:

konst id = useId()

V prohlášení id je jedinečný řetězec, který obsahuje : žeton. Po prohlášení můžete projít id proměnná přímo k prvku (prvkům), který ji potřebuje.

Jakou hodnotu přidávají tyto nové háčky k reakci?

Háčky useTransition a useDeferredValue jsou háčky kódu aplikace. Prostřednictvím souběžného vykreslování zlepšují výkon aplikací. Hák useId řeší chybu nesouladu hydratace vytvořením jedinečných ID napříč klientem a serverem.

Háky useSyncExternalStore a useInsertionEffect spolupracují s externími knihovnami a usnadňují souběžné vykreslování. Hák useInsertionEffect funguje s knihovnami CSS-in-JS. Háček useSyncExternalStore funguje s knihovnami úložiště dat, jako je obchod Redux.

Společně tyto háčky výrazně zvyšují výkon, což zase zlepšuje uživatelský dojem.