Długo oczekiwany React v18 został wreszcie wydany kilka miesięcy temu. Chociaż nie było większych zmian, dodano kilka ciekawych funkcji, którym warto się przyjrzeć. W tym artykule omówimy kilka nowych dodatków i jak uaktualnić do React v18.

Jak uaktualnić do React 18

Aby zainstalować najnowszą wersję Reacta, uruchom to polecenie w terminalu:

npm zainstalować zareaguj reak-dom

Lub jeśli używasz przędzy:

przędza dodaje reakcją-dom

Po zainstalowaniu najnowszej wersji możesz zacząć korzystać z jej nowych funkcji.

W React 18 jest kilka dodatków; oto cztery z najbardziej godnych uwagi.

1. tryb ścisły

StrictMode to funkcja, której możesz użyć do podkreślenia potencjalnych problemów w aplikacji. Kontrole w trybie ścisłym są uruchamiane tylko w trybie deweloperskim i nie mają wpływu na kompilację produkcyjną. Mogą jednak być bardzo przydatne w identyfikowaniu potencjalnych problemów w kodzie.

Możesz włączyć tryb ścisły dla dowolnej części aplikacji. Na przykład możesz włączyć to dla wszystkich swoich komponentów lub tylko dla niektórych z nich.

instagram viewer 
import Reagować z 'reagować';
funkcjonowaćDemoPrzykład() {
zwrócić (
<div>
<Pierwszy składnik />
<Reagować. Tryb ścisły>
<Drugi składnik />
<Trzeci składnik />
</React.StrictMode>
<Czwarty składnik />
</div>
 );
}

W powyższym kodzie wszystkie cztery komponenty zostałyby sprawdzone pod kątem potencjalnych problemów. Jednak ścisłe kontrole trybu będą miały zastosowanie tylko do oraz .

StrictMode pomaga również na inne sposoby, takie jak:

  • Identyfikowanie komponentów o niebezpiecznych cyklach życia: Jeśli składnik ma metodę cyklu życia oznaczoną jako niebezpieczną, zostanie wyświetlony ostrzeżenie w trybie ścisłym.
  • Ostrzeżenie o użyciu interfejsu API starszego ciągu znaków ref: Jeśli używasz starszego interfejsu API ref string, tryb ścisły ostrzeże Cię o jego użyciu.
  • Ostrzeżenie o przestarzałym użyciu findDOMNode: Jeśli używasz przestarzałego API findDOMNode, tryb ścisły ostrzeże Cię o tym.
  • Wykrywanie nieoczekiwanych skutków ubocznych: Jeśli składnik wywołuje efekty uboczne (takie jak setState) w nieoczekiwanych miejscach, tryb ścisły ostrzeże Cię o tym.
  • Wykrywanie starszego interfejsu API kontekstu: Jeśli używasz starszego interfejsu API kontekstu (który jest teraz przestarzały), tryb ścisły wyświetli ostrzeżenie.
  • Zapewnienie stanu wielokrotnego użytku: Jeśli masz stan, który jest używany przez wiele składników, tryb ścisły pomoże zapewnić jego prawidłową synchronizację.

Ogólnie rzecz biorąc, tryb ścisły może być przydatną funkcją w programowaniu, która pomaga zidentyfikować potencjalne problemy w kodzie.

2. Przejścia

Przejścia umożliwiają oznaczenie niektórych aktualizacji interfejsu jako niepilnych. Oznacza to, że React może nadać priorytet innym aktualizacjom, które są ważniejsze.

Na przykład, jeśli masz dwa pola tekstowe — jedno dla zapytania wyszukiwania, a drugie dla jego wyników — warto oznaczyć pole tekstowe wyników wyszukiwania jako przejście. W ten sposób React wie, że nie musi pilnie ponownie renderować tego pola tekstowego za każdym razem, gdy użytkownik wpisze coś w polu tekstowym zapytania.

Możesz użyć funkcji startTransition, aby oznaczyć aktualizację interfejsu użytkownika jako przejście. Oto przykład:

import { początek przejścia } z 'reagować';
startPrzejście(() => {
// Oznacz wszelkie niepilne aktualizacje stanu wewnątrz jako przejścia
});

Ten kod oznaczyłby wszystkie aktualizacje stanu w funkcji startTransition jako przejścia. W ten sposób React może skupić się na innych, ważniejszych aktualizacjach interfejsu użytkownika.

3. Automatyczne dozowanie

React udostępnia przydatną funkcję zwaną grupowaniem, która zmniejsza liczbę ponownych renderów, które mają miejsce po zmianie stanu. Może to być bardzo pomocne w optymalizacji wydajności, zwłaszcza gdy praca z kodem asynchronicznym.

Wcześniej, jeśli miałeś obietnicę lub wykonywałeś połączenie sieciowe, aktualizacje stanu nie byłyby gromadzone, a React musiałby wielokrotnie renderować. Jednak dzięki automatycznemu grupowaniu w React 18 wszystkie aktualizacje stanu są grupowane, nawet w ramach obietnic, setTimeouts i wywołań zwrotnych zdarzeń. To znacznie ogranicza pracę, którą React musi wykonać w tle.

Możesz wsadowo aktualizować stany ręcznie za pomocą funkcji flushSync, ale od React 18 proces ten jest teraz automatyczny. Daje to znacznie lepszą wydajność, ponieważ React będzie czekał na zakończenie mikrozadania przed ponownym renderowaniem.

4. Nowe haki

Wersja 18 wprowadza wiele nowych Reaguj haki, w tym useId, useTransition i useDeferredValue. Te nowe hooki to świetny sposób na dodanie dodatkowej funkcjonalności do twoich aplikacji React przy minimalnym wysiłku.

React 18 zapewnia zwiększoną wydajność aplikacji

React 18 jest tutaj i przynosi ze sobą kilka świetnych ulepszeń wydajności aplikacji internetowych. Dzięki nowej wersji React możesz łatwo tworzyć aplikacje internetowe, które są bardziej responsywne i ogólnie lepiej działają. Jeśli więc chcesz stworzyć aplikację internetową, która działa płynnie i świetnie wygląda, koniecznie wypróbuj React 18.