Dowiedz się, jak korzystać z React 18 hooków

W marcu 2022 zespół React ogłosił oficjalne wydanie React 18. Ta wersja zawierała wiele nowych funkcji mających na celu poprawę wydajności, opartych na koncepcji „renderowania współbieżnego”. Ideą współbieżnego renderowania jest umożliwienie przerwania procesu renderowania do DOM.

Wśród nowych funkcji jest pięć punktów zaczepienia: useId, useTransition, useDerredValue, useSyncExternalStore i useInsertionEffect.

React useTransition Hook

Domyślnie wszystkie aktualizacje stanu React są pilne. Aktualizacje różnych stanów w Twojej aplikacji konkurują o te same zasoby, spowalniając ją. Użycie przejścia Reaguj hak rozwiązuje ten problem, umożliwiając oznaczenie niektórych aktualizacji stanu jako niepilnych. Dzięki temu pilne aktualizacje stanu mogą przerwać te o niższym priorytecie.

Komponent SearchPage

Ten prosty program imituje wyszukiwarkę, która aktualizuje dwa stany — pole wejściowe i niektóre wyniki wyszukiwania.

import { stan użycia } z "reagować";
funkcjonowaćStrona wyszukiwania() {
 const [input, setInput] = useState(





instagram viewer

"")
stały [lista, setList] = useState([]);
stały listaRozmiar = 30000
funkcjonowaćuchwytZmień(mi) {
setInput(mi.cel.wartość);
stały listaItems = [];
dla (wynajmować ja = 0; i < rozmiar listy; i++){
Lista przedmiotów.naciskać(mi.cel.wartość);
 }
setList (listItems);
 }
zwrócić (
<div>
<etykieta>Przeszukaj internet: </label>
<typ wejścia="tekst" value={input} onChange={handleChange} />
{lista.map((element, indeks) => {
 zwrócić <klucz div={indeks}>{przedmiot}</div>
 })}
</div>
 );
}
eksportdomyślna Strona wyszukiwania;

Zaktualizowany komponent aplikacji

import Strona wyszukiwania z "./Komponenty/StronaWyszukiwania";
funkcjonowaćAplikacja() {
zwrócić (
<div>
< Strona wyszukiwania/>
</div>
 );
}
eksportdomyślna Aplikacja;

Powyższy kod renderuje aplikację React z polem wejściowym:

Gdy zaczniesz wpisywać znaki w polu, poniżej pojawi się 30 000 kopii wpisanego tekstu:

Jeśli wpiszesz kilka znaków szybko po sobie, powinieneś zauważyć opóźnienie. Wpływa na czas, jaki zajmuje pojawienie się znaków zarówno w polu wejściowym, jak i w „obszarze wyników wyszukiwania”. Dzieje się tak, ponieważ React uruchamia obie aktualizacje stanu w tym samym czasie.

Jeśli demo działa zbyt wolno lub zbyt szybko, spróbuj poprawić listaRozmiar wartość odpowiednio.

Wstawienie haka useTransition do aplikacji pozwoli na nadanie priorytetu jednemu aktualizowaniu stanu względem drugiego.

Korzystanie z haczyka useTransition

import {useState, useTransition} z "reagować";
funkcjonowaćStrona wyszukiwania() {
stały [isPending, startTransition] = useTransition();
 const [input, setInput] = useState("")
stały [lista, setList] = useState([]);
stały listaRozmiar = 30000
funkcjonowaćuchwytZmień(mi) {
setInput(mi.cel.wartość);
 startPrzejście(() => {
stały listaItems = [];
dla (wynajmować ja = 0; i < rozmiar listy; i++){
Lista przedmiotów.naciskać(mi.cel.wartość);
 }
setList (listItems);
 });
 }
zwrócić (
<div>
<etykieta>Przeszukaj internet: </label>
<typ wejścia="tekst" value={input} onChange={handleChange} />
{oczekuje? "...Ładowanie wyników": lista.map((element, indeks) => {
 zwrócić <klucz div={indeks}>{przedmiot}</div>
 })}
</div>
 );
}
eksportdomyślna Strona wyszukiwania;

Aktualizuję Twój Strona wyszukiwania komponent z powyższym kodem nada pierwszeństwo polu wejściowemu nad „obszarem wyników wyszukiwania”. Ta prosta zmiana ma wyraźny skutek: powinieneś natychmiast zacząć widzieć tekst, który wpisujesz w polu wprowadzania. Tylko „obszar wyników wyszukiwania” nadal będzie miał niewielkie opóźnienie. Wynika to z startPrzejścieinterfejs programowania aplikacji (API) z haczyka useTransition.

Kod, który renderuje wyniki wyszukiwania w interfejsie użytkownika, używa teraz startPrzejście API. Dzięki temu pole wejściowe może przerwać aktualizację stanu wyników wyszukiwania. Kiedy jest w toku() funkcja wyświetla „…Wczytywanie wyniku” oznacza to, że następuje przejście (z jednego stanu do drugiego).

Reaguj useDeferredValue Hook

Hak useDeferredValue umożliwia odroczenie ponownego renderowania aktualizacji stanu, która nie jest nagłaśniana. Podobnie jak hak useTransition, hak useDeferredValue jest hakiem współbieżności. Hak useDeferredValue umożliwia stanowi zachowanie oryginalnej wartości podczas przejścia.

Komponent SearchPage z hookiem useDeferredValue()

import { useState, useTransition, useDeferredValue } z "reagować";
funkcjonowaćStrona wyszukiwania() {
stały [,startPrzejście] = użyjPrzejścia();
 const [input, setInput] = useState("")
stały [lista, setList] = useState([]);
stały listaRozmiar = 30000
funkcjonowaćuchwytZmień(mi) {
setInput(mi.cel.wartość);
 startPrzejście(() => {
stały listaItems = [];
dla (wynajmować ja = 0; i < rozmiar listy; i++){
Lista przedmiotów.naciskać(mi.cel.wartość);
 }
setList (listItems);
 });
 }
stały deferredValue = useDeferredValue (dane wejściowe);
zwrócić (
<div>
<etykieta>Przeszukaj internet: </label>
<typ wejścia="tekst" value={input} onChange={handleChange} />
{lista.map((element, indeks) => {
 zwrócić <div key={indeks} input={deferredValue} >{przedmiot}</div>
 })}
</div>
 );
}
eksportdomyślna Strona wyszukiwania;

W powyższym kodzie zobaczysz, że jest w toku() funkcja już nie istnieje. Dzieje się tak, ponieważ odroczona wartość zmienna z haka useDeferredValue zastępuje jest w toku() funkcja podczas zmiany stanu. Zamiast odświeżania listy wyników wyszukiwania po wpisaniu nowego znaku, zachowa ona swoje stare wartości, dopóki aplikacja nie zaktualizuje stanu.

React useSyncExternalStore Hook

W przeciwieństwie do haczyków useTransition i useDeferredValue, które działają z kodem aplikacji, useSyncExternalStore działa z bibliotekami. Pozwala aplikacji React na subskrybowanie i odczytywanie danych z zewnętrznych bibliotek. Hak useSyncExternalStore używa następującej deklaracji:

stały state = useSyncExternalStore (subskrybuj, getSnapshot[, getServerSnapshot]);

Podpis ten zawiera:

• państwo: wartość magazynu danych, który zwraca hak useSyncExternalStore.
• Subskrybuj: rejestruje wywołanie zwrotne, gdy zmienia się magazyn danych.
• pobierzMigawkę: zwraca bieżącą wartość magazynu danych.
• pobierzServerSnapshot: zwraca migawkę używaną podczas renderowania serwera.

Dzięki useSyncExternalStore możesz subskrybować całą składnicę danych lub określone pole w składnicy danych.

React useInsertionEffect Hook

Hak useInsertionEffect to kolejny nowy haczyk w React, który współpracuje z bibliotekami. Jednak zamiast magazynów danych hak useInsertionEffect współpracuje z bibliotekami CSS-in-JS. Ten zaczep rozwiązuje problemy z wydajnością renderowania stylu. Stylizuje DOM przed odczytaniem układu w haczyku useLayoutEffect.

React useId Hook

Hak useId jest używany w sytuacjach, które wymagają unikalnych identyfikatorów (z wyjątkiem kluczy na liście). Jego głównym celem jest generowanie identyfikatorów, które pozostają unikalne dla klienta i serwera, co pozwala uniknąć błędu niezgodności uwodnienia serwera React. Hak useId używa następującej deklaracji:

stały id = użyj identyfikatora()

W deklaracji ID to unikalny ciąg, który zawiera : token. Po deklaracji możesz przekazać ID zmienna bezpośrednio do elementu (elementów), które tego potrzebują.

Jaką wartość dodają te nowe hooki w reakcji?

Haki useTransition i useDeferredValue to haki kodu aplikacji. Dzięki renderowaniu współbieżnemu poprawiają wydajność aplikacji. Hak useId rozwiązuje błąd niezgodności nawodnienia, tworząc unikalne identyfikatory na kliencie i serwerze.

Punkty zaczepienia useSyncExternalStore i useInsertionEffect współpracują z zewnętrznymi bibliotekami w celu ułatwienia renderowania współbieżności. Hak useInsertionEffect współpracuje z bibliotekami CSS-in-JS. Hak useSyncExternalStore współpracuje z bibliotekami magazynu danych, takimi jak sklep Redux.

Razem te haki znacznie zwiększają wydajność, co z kolei poprawia wrażenia użytkownika.