Myślisz o spróbowaniu kodowania w React? Oto kluczowe nowe funkcje do wypróbowania w React 18.

React to bardzo popularna biblioteka JavaScript o otwartym kodzie źródłowym, stworzona przez Facebooka w 2013 roku. Dzięki swojej elastyczności wielu programistów wykorzystuje niektóre z jego funkcji do tworzenia szybkich, wydajnych i wielokrotnego użytku komponentów interfejsu użytkownika (UI).

W marcu 2022 roku zespół uruchomił najnowszą i oczekiwaną wersję biblioteki React, React 18, która zawiera nowe funkcje, które koncentrują się na poprawie wydajności aplikacji.

Nowe funkcje w React 18

React 18 składa się z kilku przydatnych nowych funkcji dodanych do otwarta biblioteka JavaScript. Wiele z tych zmian nie było w poprzedniej wersji, podczas gdy inne funkcje zostały ulepszone. Niektóre z tych funkcji obejmują; nowe główne API, Automatyczne wsadowe, Transition API, Suspense API oraz wydanie nowych hooków.

Nowy główny interfejs API

Główny interfejs API w React śledzi sposób renderowania komponentu najwyższego poziomu w drzewie. W poprzednich wersjach React plik

instagram viewer
renderowanie Metoda została użyta do wykonania renderowania, które jest teraz nazywane starszym interfejsem API root.

Jednak React 18 jest dostarczany z nowym interfejsem API roota, który tworzy root za pomocą utwórzRoot metody, a następnie renderuje komponent React do utworzonego katalogu głównego za pomocą metody renderowanie metoda.

Ten nowy główny interfejs API zapewni dostęp do funkcji w najnowszej wersji, takich jak omówiona później funkcja interfejsu API przejścia. Chociaż stary sposób będzie nadal działał w React 18, może zostać wycofany w przyszłości.

Poniższy fragment pokazuje, jak główny interfejs API jest skonstruowany zarówno w starym, jak i nowym sposobie.

Starszy główny interfejs API

import ReactDOM z„reaguj”;
import Aplikacja z„./Aplikacja”;
ReactDOM.render(<Aplikacja />, dokument.getElementById(„aplikacja”))

Nowy główny interfejs API

import ReactDOM z„reaguj/klient”;
import Aplikacja z„./Aplikacja”;
konst root = ReactDOM.createRoot(dokument.getElementById(„aplikacja”));
root.render(<Aplikacja />)

Automatyczne dozowanie

Przetwarzanie wsadowe w React obejmuje wiele aktualizacji stanu w jednym ponownym renderowaniu przy każdym zdarzeniu przeglądarki, na przykład a zdarzenie kliknięcia. Wszelkie zmiany stanu, które wystąpiły poza zdarzeniem, takim jak obietnica lub wywołanie zwrotne, nie będą grupowane.

W React 18 aktualizacje stanu wsadowego są wykonywane automatycznie, niezależnie od tego, gdzie te aktualizacje mają miejsce. Ta funkcja zapewnia natychmiastową poprawę wydajności i czasu renderowania. Jeśli jednak masz stan składnika, którego nie chcesz grupować, możesz zrezygnować z niego za pomocą FlushSync metoda. Poniżej znajduje się przykładowy fragment, w jaki sposób można to zrobić;

import { flushSync } z„reaguj”;
funkcjonowaćuchwytKliknij() {
 flushSync(() => {
 setCount(liczyć => liczyć + 1);
]});
 flushSync(() => {
 setStore(sklep => !sklep);
});
}

Interfejs API przejścia

W React aktualizacje dokonywane w interfejsie użytkownika można sklasyfikować jako pilne, a aktualizacje przejścia nazywane są również niepilnymi. Przykładem pilnej aktualizacji może być przypadek wprowadzenia tekstu w polu, podczas gdy aktualizacja przejścia może być funkcją filtrowania wyszukiwania.

Teraz, jeśli takie aktualizacje wystąpią jednocześnie, może to być nazwane ciężką operacją i może doprowadzić do zamrożenia aplikacji. Aby rozwiązać ten problem, w tym miejscu interfejs API przejścia o nazwie startPrzejście przychodzi się bawić. Ta nowa funkcja mówi Reactowi, które aktualizacje powinny być oznaczone jako „przejścia”, co z kolei poprawia interakcje użytkownika. Oto przykładowy kod tego, jak to działa;

import { startTransition } z"reagować";
startTransition(() => {
 setSearch (wejście);
});

Niepewność

Gdy aplikacja jest renderowana na serwerze, statyczny plik HTML jest zwracany do przeglądarki, umożliwiając użytkownikowi zobaczenie, jak wygląda aplikacja podczas ładowania JavaScript. Po załadowaniu pliku HTML staje się dynamiczny z tzw uwodnienie. Wadą jest to, że jeśli to wszystko nie jest na miejscu, twoja aplikacja nie stanie się interaktywna.

Aby rozwiązać ten problem, React 18 udostępnia dwie nowe funkcje renderowania po stronie serwera (SSR) wykorzystujące Niepewność część;

  • Przesyłanie strumieniowe HTML umożliwia wysyłanie fragmentów komponentu w miarę ich renderowania.
  • Selektywne nawilżanie nadaje priorytet interaktywności składników wybranych przez użytkownika.

Nowe haki

Dużym punktem zwrotnym dla React było wprowadzenie haki w React wersja 16, która umożliwia komponentom funkcyjnym dostęp do stanów i innych funkcji React bez pisania klas. React 18 jest dostarczany z pięcioma nowymi hakami, aby poprawić wrażenia programistów;

  • useId: Ten hak pozwala nam stworzyć unikalny identyfikator (ID) w naszej aplikacji zarówno na serwerze, jak i kliencie.
  • useTransition: Jest używany obok startPrzejście aby utworzyć nową aktualizację stanu, którą można określić jako niepilną.
  • useDefferedValue: Pozwala na odroczenie aktualizacji, które są mniej pilne.
  • useSyncExternalStore: Ten hak jest przydatny podczas implementowania subskrypcji zewnętrznych źródeł danych.
  • useInsertionEffect: Ten hak jest ograniczony do autorów bibliotek CSS-in-JS do wstrzykiwania stylów do DOM.

Jak zaktualizować, aby zareagować 18

Aby przeprowadzić aktualizację, można użyć menedżera pakietów npm lub przędzy, uruchamiając następujące polecenie w terminalu.

np zainstalować reaguj reaguj-dom

Lub

przędza dodaj reakcję zareaguj-dom

Następnie musisz dokonać zmiany w pliku indeks.js plik w katalogu głównym folderu projektu ze starszego interfejsu API do nowego głównego interfejsu API, jak pokazano wcześniej.

Jak skonfigurować nowy projekt React 18

Aby skonfigurować nowy projekt React 18, pakiet create-react-app jest instalowany z npm lub przędzą w terminalu;

npx tworzyć-reaguj-aplikacja moja-reaguj-aplikacja

Lub

dodatek przędzy tworzyć-reaguj-aplikacja moja-reaguj-aplikacja

Popraw wydajność swojej aplikacji dzięki React 18

Teraz wiesz o niektórych nowych funkcjach w React 18, takich jak nowy główny interfejs API, Suspense, Transition lub Automatic Batching oraz o tym, jak uaktualnić do tej nowej wersji i skonfigurować ją od podstaw.

Te ostatnie zmiany w React są gotowe do wypróbowania już teraz.