Zistite, ako používať háky React 18

V marci 2022 tím React oznámil oficiálne vydanie React 18. Toto vydanie prišlo s množstvom nových funkcií zameraných na zlepšenie výkonu na základe konceptu „súbežného vykresľovania“. Myšlienkou súbežného vykresľovania je urobiť proces vykresľovania do DOM prerušiteľným.

Medzi nové funkcie patrí päť háčikov: useId, useTransition, useDerredValue, useSyncExternalStore a useInsertionEffect.

Reagovať useTransition Hook

V predvolenom nastavení sú všetky aktualizácie stavu React naliehavé. Rôzne aktualizácie stavu vo vašej aplikácii súťažia o rovnaké zdroje, čím ju spomaľujú. PoužitiePrechod Reagovať hák rieši tento problém tým, že vám umožňuje označiť niektoré aktualizácie stavu ako nenaliehavé. To umožňuje, aby naliehavé aktualizácie stavu prerušili používateľov s nižšou prioritou.

Komponent SearchPage

Tento jednoduchý program napodobňuje vyhľadávací nástroj, ktorý aktualizuje dva stavy – vstupné pole a niektoré výsledky vyhľadávania.

importovať { useState } od "reagovať";
funkciuVyhľadávacia stránka() 





instagram viewer
{
 const [vstup, setInput] = useState("")
konšt [zoznam, setList] = useState([]);
konšt listSize = 30000
funkciurukoväťZmeniť(e) {
setInput(e.cieľ.hodnota);
konšt listItems = [];
pre (nech i = 0; i < listSize; i++){
zoznam položiek.TLAČIŤ(e.cieľ.hodnota);
 }
setList (listItems);
 }
vrátiť (
<div>
<štítok>Hladanie na internete: </label>
<typ vstupu ="text" value={input} onChange={handleChange} />
{zoznam.map((položka, index) => {
 vrátiť <div key={index}>{item}</div>
 })}
</div>
 );
}
exportpredvolená SearchPage;

Aktualizovaný komponent aplikácie

importovať Vyhľadávacia stránka od "./Components/SearchPage";
funkciuApp() {
vrátiť (
<div>
< SearchPage/>
</div>
 );
}
exportpredvolená App;

Vyššie uvedený kód vykresľuje aplikáciu React so vstupným poľom:

Keď začnete písať znaky do poľa, nižšie sa zobrazí 30 000 kópií napísaného textu:

Ak napíšete niekoľko znakov rýchlo za sebou, mali by ste si všimnúť oneskorenie. Ovplyvňuje čas, ktorý trvá, kým sa znaky objavia vo vstupnom poli aj v „oblasti výsledkov vyhľadávania“. Je to preto, že React spúšťa obe aktualizácie stavu súčasne.

Ak vám demo beží príliš pomaly alebo príliš rýchlo, skúste ho vyladiť listSize hodnotu podľa toho.

Vloženie háku useTransition do aplikácie vám umožní uprednostniť jednu aktualizáciu stavu pred druhou.

Pomocou funkcie UseTransition Hook

importovať {useState, useTransition} od "reagovať";
funkciuVyhľadávacia stránka() {
konšt [isPending, startTransition] = useTransition();
 const [vstup, setInput] = useState("")
konšt [zoznam, setList] = useState([]);
konšt listSize = 30000
funkciurukoväťZmeniť(e) {
setInput(e.cieľ.hodnota);
 startTransition(() => {
konšt listItems = [];
pre (nech i = 0; i < listSize; i++){
zoznam položiek.TLAČIŤ(e.cieľ.hodnota);
 }
setList (listItems);
 });
 }
vrátiť (
<div>
<štítok>Hladanie na internete: </label>
<typ vstupu ="text" value={input} onChange={handleChange} />
{isPending? "...Načítavajú sa výsledky": zoznam.map((položka, index) => {
 vrátiť <div key={index}>{item}</div>
 })}
</div>
 );
}
exportpredvolená SearchPage;

Aktualizuje sa váš Vyhľadávacia stránka komponent s vyššie uvedeným kódom uprednostní vstupné pole pred „oblasťou s výsledkami vyhľadávania“. Táto jednoduchá zmena má jasný efekt: text, ktorý zadávate do vstupného poľa, by ste mali začať vidieť okamžite. Iba „oblasť výsledkov vyhľadávania“ bude mať stále mierne oneskorenie. Je to spôsobené tým startTransitionaplikačné programové rozhranie (API) z háku useTransition.

Kód, ktorý vykresľuje výsledky vyhľadávania do používateľského rozhrania, teraz používa startTransition API. To umožňuje vstupnému poľu prerušiť aktualizáciu stavu výsledkov vyhľadávania. Keď isPending() funkcia zobrazí „...Načítava sa výsledok“, čo znamená, že prebieha prechod (z jedného stavu do druhého).

Reagovať useDeferredValue Hook

Hák useDeferredValue vám umožňuje odložiť opätovné vykreslenie nevyžiadanej aktualizácie stavu. Podobne ako háčik useTransition, aj háčik useDeferredValue je háčik súbežnosti. Hák useDeferredValue umožňuje stavu zachovať si pôvodnú hodnotu, kým je v prechode.

Komponent SearchPage s hákom useDeferredValue().

importovať { useState, useTransition, useDeferredValue } od "reagovať";
funkciuVyhľadávacia stránka() {
konšt [,startTransition] = useTransition();
 const [vstup, setInput] = useState("")
konšt [zoznam, setList] = useState([]);
konšt listSize = 30000
funkciurukoväťZmeniť(e) {
setInput(e.cieľ.hodnota);
 startTransition(() => {
konšt listItems = [];
pre (nech i = 0; i < listSize; i++){
zoznam položiek.TLAČIŤ(e.cieľ.hodnota);
 }
setList (listItems);
 });
 }
konšt deferredValue = useDeferredValue (vstup);
vrátiť (
<div>
<štítok>Hladanie na internete: </label>
<typ vstupu ="text" value={input} onChange={handleChange} />
{zoznam.map((položka, index) => {
 vrátiť <div key={index} input={deferredValue} >{item}</div>
 })}
</div>
 );
}
exportpredvolená SearchPage;

Vo vyššie uvedenom kóde uvidíte, že isPending() funkcia už neexistuje. Je to preto, že deferredValue premenná z háku useDeferredValue nahrádza isPending() funkcia počas prechodu stavu. Namiesto toho, aby sa zoznam výsledkov vyhľadávania obnovoval pri zadávaní nového znaku, zachová si svoje staré hodnoty, kým aplikácia neaktualizuje stav.

Reagovať useSyncExternalStore Hook

Na rozdiel od hákov useTransition a useDeferredValue, ktoré pracujú s kódom aplikácie, useSyncExternalStore pracuje s knižnicami. Umožňuje vašej aplikácii React odoberať a čítať údaje z externých knižníc. Hák useSyncExternalStore používa nasledujúcu deklaráciu:

konšt state = useSyncExternalStore (subscribe, getSnapshot[, getServerSnapshot]);

Tento podpis obsahuje nasledovné:

• štát: hodnota dátového úložiska, ktorú vracia háčik useSyncExternalStore.
• predplatiť: registruje spätné volanie pri zmene dátového úložiska.
• getSnapshot: vráti aktuálnu hodnotu dátového úložiska.
• getServerSnapshot: vráti snímku použitú počas vykresľovania servera.

Pomocou useSyncExternalStore sa môžete prihlásiť na odber celého úložiska údajov alebo konkrétneho poľa v úložisku údajov.

Reagovať useInsertionEffect Hook

Hák useInsertionEffect je ďalší nový hák React, ktorý pracuje s knižnicami. Namiesto dátových úložísk však hák useInsertionEffect funguje s knižnicami CSS-in-JS. Tento háčik rieši problémy s výkonom vykresľovania štýlu. Pred prečítaním rozloženia v háku useLayoutEffect upraví DOM.

Reagovať useId Hook

Háčik useId použijete v situáciách, ktoré vyžadujú jedinečné ID (okrem kľúčov v zozname). Jeho hlavným účelom je generovať ID, ktoré zostanú jedinečné naprieč klientom a serverom, čím sa zabráni chybe nesúladu hydratácie servera React. Hák useId používa nasledujúcu deklaráciu:

konšt id = useId()

Vo vyhlásení id je jedinečný reťazec, ktorý obsahuje : žetón. Po vyhlásení môžete prejsť id premenná priamo k prvku (prvkom), ktorý to potrebuje.

Akú hodnotu pridávajú tieto nové háčiky v reakcii?

Háčiky useTransition a useDeferredValue sú háčiky kódu aplikácie. Prostredníctvom súbežného vykresľovania zlepšujú výkon aplikácií. Hák useId rieši chybu nesúladu hydratácie vytvorením jedinečných ID medzi klientom a serverom.

Háky useSyncExternalStore a useInsertionEffect spolupracujú s externými knižnicami na uľahčenie súbežného vykresľovania. Hák useInsertionEffect funguje s knižnicami CSS-in-JS. Hák useSyncExternalStore funguje s knižnicami na ukladanie údajov, ako je obchod Redux.

Spoločne tieto háčiky výrazne zvyšujú výkon, čo zase zlepšuje používateľskú skúsenosť.