React 18, długo oczekiwana wersja Reacta, została wydana z ekscytującymi funkcjami, takimi jak automatyczne dozowanie, a nowe API –początek przejścia, i strumieniowe renderowanie po stronie serwera z obsługą Niepewność. Tym, co jest tak wyjątkowego w tej nowszej wersji, jest jej wyjątkowa „renderowanie współbieżne" metoda. We wcześniejszych wersjach Reacta proces renderowania był synchroniczny i nieprzerywany, gdzie interfejs użytkownika blokował się podczas długich procesów renderowania i nie odpowiadał natychmiast na dane wejściowe użytkownika. Korzystając z React 18, proces renderowania można uczynić asynchronicznym i można go przerywać, wstrzymywać, wznawiać, a nawet porzucać, umożliwiając programistom tworzenie bardziej płynnych doświadczeń użytkownika.
Jak zaktualizować React 17 do React 18?
React 18 jest obecnie wydany w wersji alfa i można go pobrać za pomocą polecenia
Komponent jest zwykle renderowany w ten sposób
Jednak, aby korzystać z najnowszych funkcji, komponenty muszą być renderowane w następujący sposób:
Co jest w React 18?
Automatyczne dozowanie
Automatyczne przetwarzanie wsadowe to renderowanie, które odbywa się w tym samym czasie, gdy uruchamiane jest aktualizowanie z wieloma stanami jednocześnie. Poprzednia wersja Reacta mogła aktualizować wsadowo tylko w ramach obsługi zdarzeń Reacta. Jeśli aktualizacje wielu stanów są wyzwalane przez obietnicę lub wywołanie zwrotne, ich odpowiedzi nie są renderowane w tym samym czasie. Ale w React 18 wszystkie rendery są grupowane, co oznacza, że będą miały miejsce w tym samym czasie, niezależnie od wyzwalacza.
Oto przykład z obietnicą:
Niepewność
Z Niepewność, React 18 znacznie poprawia wydajność SSR, umożliwiając asynchroniczne udostępnianie części aplikacji. Suspense pomaga w określeniu, co React powinien pokazywać, gdy część drzewa nie jest gotowa do renderowania. Na przykład w przypadku czterech komponentów: nagłówka, paska bocznego, komponentu banerowego i komponentu głównego. Jeśli wszystkie cztery są ułożone jeden na drugim w ten sposób
Następnie serwer próbowałby je renderować od razu, spowalniając całą stronę. Jeśli nagłówek, pasek boczny i główny są ważniejsze dla czytelników, można nadać im priorytet nad banerem, zawijając Transparent komponent w Niepewność tagi:
W rezultacie serwer najpierw serwowałby nagłówek, pasek boczny i główny komponent, a następnie wyświetlałby się spinner, gdy baner czeka na załadowanie.
Przejścia
Aplikacje React są interaktywne, jednak aby aktualizować się automatycznie w miarę interakcji ludzi, ciągłe aktualizacje mogą spowodować znaczne spowolnienie aplikacji i słabsze wrażenia użytkownika. Przejście to nowa funkcja React, która rozróżnia pilne i niepilne aktualizacje. Aktualizacje przejścia przekształcają interfejs użytkownika z jednego widoku do drugiego.
- Pilne aktualizacje to bezpośrednie interakcje, takie jak pisanie, klikanie, naciskanie itp., które wymagają natychmiastowej reakcji, aby dopasować się do własnej intuicji dotyczącej zachowania obiektów fizycznych. W przeciwnym razie czują się „źle”. Jednak przejścia są inne, ponieważ użytkownik nie spodziewa się zobaczyć na ekranie każdej wartości pośredniej.
Dane wejściowe jednego użytkownika powinny zwykle skutkować zarówno pilną, jak i niepilną aktualizacją, aby zapewnić jak najlepsze wrażenia użytkownika. Interfejs API StartTransition może być użyty w zdarzeniu wejściowym, aby poinformować React, które aktualizacje są pilne, a które są „przejściami”.
- Aktualizacje, które nie są pilne, są opakowane w „startTransition” i zostaną przerwane, jeśli pojawią się pilniejsze aktualizacje, takie jak kliknięcia lub naciśnięcia klawiszy. Jeśli użytkownik przerwie przejście (na przykład wpisując wiele znaków w wierszu), React odrzuci wszelkie przestarzałe renderowanie i wyrenderuje tylko najnowszą aktualizację.
Nowe haki
- Użyj identyfikatora
useId to nowy haczyk do tworzenia unikalnych identyfikatorów zarówno na kliencie, jak i na serwerze, unikając jednocześnie niedopasowania hydratacji. Jest to najbardziej korzystne w przypadku bibliotek komponentów, które wymagają integracji z interfejsami API ułatwień dostępu, które wymagają unikalnych identyfikatorów. To rozwiązuje poważny problem, który istniał w React 17 i jego poprzednich wersjach, ale jest jeszcze bardziej krytyczny w React 18 ze względu na sposób, w jaki nowy renderer serwera strumieniowego zapewnia niepoprawny kod HTML.
- użyj Przejścia
„useTransition” i „startTransition” pozwoliłyby na oznaczenie niektórych aktualizacji stanu jako niepilnych. Domyślnie inne aktualizacje stanu są uważane za pilne. React umożliwiłby pilne aktualizacje stanu (na przykład aktualizacja wprowadzonego tekstu) przerwanie niepilnych aktualizacji stanu (na przykład zliczanie wyników).
- użyjSyncExternalStore
„useSyncExternalStore” to nowy punkt zaczepienia, który umożliwia zewnętrznym sklepom obsługę współbieżnych odczytów, wymuszając synchronizację aktualizacji w sklepie. Eliminuje konieczność stosowania useEffect podczas wdrażania subskrypcji do zewnętrznych źródeł danych i jest zalecany dla każdej biblioteki integrującej się ze stanem zewnętrznym względem Reacta.
- użyj wartości odroczonej
„useDeferredValue” pomaga opóźnić ponowne renderowanie części drzewa, która nie jest pilna. Działa w ten sam sposób, co debouncing, chociaż ma kilka zalet. React podejmie próbę odroczonego renderowania bezpośrednio po tym, jak początkowe renderowanie zostanie odzwierciedlone na ekranie, ponieważ nie ma z góry określonego opóźnienia. Odroczone renderowanie jest przerywane i nie blokuje danych wejściowych użytkownika.
- użyj efektu wstawiania
„useInsertionEffect” to nowy haczyk, który pozwala bibliotekom CSS-in-JS rozwiązać problemy z wydajnością związane z wstrzykiwaniem stylów do renderowania. Jeśli nie zbudowałeś już biblioteki CSS-in-JS, nie oczekujemy, że kiedykolwiek będziesz jej używać. Ten zaczep zostanie aktywowany po zmutowaniu DOM, ale przed efektami układu odczytuje nowy układ. useInsertionEffect jest jeszcze ważniejsze w React 18, ponieważ React poddaje się przeglądarce podczas współbieżnego renderowania, dając jej szansę na ponowne obliczenie układu.
Wnioski
Wraz z wprowadzeniem React 18 nastąpiła drastyczna zmiana w świecie aplikacji internetowych ze względu na jego unikalne oferty, takie jak tryb współbieżny i renderowanie po stronie serwera. Najnowsza funkcja ułatwiłaby tworzenie i utrzymywanie kodu, a także sprawiłaby, że aplikacje będą szybsze i bardziej reagowały na interakcje użytkowników.
O autorze:
Manikandan jest kierownikiem technicznym w Mantra Labs pracującym nad Projekty związane z React/Angular. Interesuje się poznawaniem algorytmów handlowych analityków giełdowych, aw wolnym czasie uwielbia pływać, gotować i grać w krykieta i szachy.
Wiedza, którą warto dostarczyć w swojej skrzynce odbiorczej
