Co nowego w bibliotece React JavaScript UI

Teraz dostępna w wersji produkcyjnej, wersja 16.8 biblioteki React JavaScript UI ma możliwość przechwytywania, do używania stanu i innych funkcji Reacta bez konieczności pisania klasy.

Skąd pobrać React

Możesz pobrać produkt w wersji React z GitHub.

Aktualna wersja: Nowe funkcje w React 16.8

Wydany w lutym 2019, React 168 zapewnia implementację hooków dla DOM, serwera DOM, renderowania testowego i płytkiego renderowania. Haki są obsługiwane w React DevTools. Programiści mogą tworzyć własne punkty zaczepienia, aby udostępniać między komponentami logikę stanu wielokrotnego użytku. Jednak Facebook radzi programistom, aby nie spieszyli się z tą możliwością, nie zalecając programistom przepisywania aplikacji tak, aby korzystały z haków „z dnia na dzień”.

Nie ma planów usuwania klas z Reacta, więc programiści powinni wypróbować podpięcia w niektórych nowych komponentach. Kod wykorzystujący haki wykorzystujące wykorzystanie będzie działał wraz z istniejącym kodem przy użyciu klas.

Poprzednia wersja: Nowe funkcje w React 16.7

Wydany w grudniu 2018, React 16.7 dodaje funkcję hooków do używania stanu i innych funkcji Reacta bez pisania klas.

Hooki to funkcje, które łączą się ze stanem reakcji i cechami cyklu życia komponentów funkcji. Obecnie działają równolegle z istniejącym kodem, umożliwiając stopniowe wdrażanie. Nie ma żadnych planów usunięcia klas z React. Hooki rozwiązują różne problemy w Reakcie, w tym:

  • Brak możliwości dołączenia zachowania wielokrotnego użytku do komponentu. Były wzorce, takie jak rekwizyty renderowania i komponenty wyższego rzędu, które próbują rozwiązać ten problem, ale wymagają one przebudowy komponentów, co może być uciążliwe i utrudniać śledzenie kodu. Korzystając z haków, programiści mogą wyodrębnić logikę stanową z komponentu w celu niezależnego testowania i ponownego wykorzystania.
  • Złożone komponenty stały się zbyt trudne do zrozumienia. Dzięki hakom komponenty można podzielić na mniejsze funkcje w oparciu o powiązane elementy, takie jak konfigurowanie subskrypcji lub pobieranie danych. Odbywa się to zamiast wymuszania podziału w oparciu o metody cyklu życia.
  • Zajęcia mogą zmylić ludzi i maszyny i są postrzegane jako największa przeszkoda w nauce Reagowania. Hooki pozwalają programistom używać więcej funkcji Reacta bez klas. Hooki obejmują funkcje, ale bez poświęcania ducha React. Zapewniony jest dostęp do koniecznych luków ewakuacyjnych. Programiści nie muszą uczyć się skomplikowanych technik programowania funkcjonalnego lub reaktywnego.

Poprzednia wersja: Nowe funkcje w React 16.6

Wydany w październiku 2018, React 16.6 zawiera kilka ulepszeń.

  • Dzięki temu memoprogramiści mogą zrezygnować z renderowania za pomocą komponentów funkcji, podobnie jak komponenty klas mogą zrezygnować z renderowania, gdy właściwości wejściowe są takie same przy użyciu PureComponentslub shouldComponentUpdate.
  • W lazyprogramie programiści mogą używać Suspensekomponentu do dzielenia kodu, opakowując dynamiczny import w wywołaniu React.lazy(). Uwaga: ta funkcja nie jest jeszcze dostępna do renderowania po stronie serwera.
  • Wygodny interfejs API został wprowadzony w celu wykorzystania wartości kontekstu z poziomu składnika klasy. Programiści narzekali, że przyjęcie nowego interfejsu API właściwości renderowania z React 16.3 może być trudne w komponentach klasowych.
  • Metoda błędu getDerivedStatefromError()renderuje awaryjny interfejs użytkownika przed zakończeniem renderowania. Uwaga: nie jest jeszcze dostępny do renderowania po stronie serwera, ale programiści mogą zacząć się do niego przygotowywać.
  • Dwa Strictmodeinterfejsy API zostały wycofane: findDOMNode()i starszy kontekst przy użyciu contextType i getChildContext. Zachęcamy programistów do przejścia na nowy contextTypeinterfejs API.

Poprzednia wersja: Nowe funkcje w React 16.4

Wersja 16.4 React, wydana pod koniec maja 2018 r., Dodaje obsługę zdarzeń wskaźnika, często żądaną funkcję, a także ulepszenie nadchodzącej funkcji renderowania asynchronicznego. Przeglądarki obsługujące zdarzenia wskaźników obejmują wersje Google Chrome, Mozilla Firefox, Microsoft Edge i Microsoft Internet Explorer.

Zdarzenia wskaźnikowe to zdarzenia DOM uruchamiane dla urządzenia wskazującego, zaprojektowane w celu zapewnienia jednego modelu zdarzenia do obsługi urządzeń takich jak mysz lub dotyk.

Dzięki obsłudze zdarzeń wskaźnikowych, React dodaje obsługę typów zdarzeń, które obejmują:

  • onPointerDow
  • onPointerMove
  • onPointerUp
  • onPointerCancel
  • onGotPointerCapture
  • onLostPointerCapture
  • onPointerEnter
  • onPointerLeave
  • onPointerOver
  • onPointerOut

Inne nowe możliwości w React 16.4 obejmują:

  • Poprawiona zgodność z planowanym trybem renderowania asynchronicznego. Aby to zrobić, wydanie zawiera poprawkę błędu getDerivedStatefromProps, która jest teraz wywoływana za każdym razem, gdy potrzebny jest komponent, niezależnie od tego, dlaczego ma miejsce aktualizacja. Został wywołany tylko wtedy, gdy komponent został ponownie wyrenderowany przez rodzica i nie uruchomił się w wyniku lokalnego setState. Poprawka nie ma wpływu na większość aplikacji, ale w rzadkich przypadkach może powodować problemy z niewielką liczbą składników.
  • Dodano eksperymentalny komponent profilera o nazwie unstable_Profiler, służący do pomiaru wydajności.
  • Eksperymentalny program uzgadniający do tworzenia niestandardowych mechanizmów renderujących zawiera nowy kształt konfiguracji hosta, który jest płaski i nie używa obiektów zagnieżdżonych.
  • Poprawki do React DOM obejmują naprawę błędu, który w niektórych przypadkach uniemożliwiał propagację kontekstu, a także sytuację, w której niektóre atrybuty były nieprawidłowo usuwane z niestandardowych węzłów elementów.

Eksperymentalna możliwość zwracania wywołań została usunięta w React w wersji 16.4, ponieważ wpływała na rozmiar pakietu, a API nie było wystarczająco dobre. Spodziewaj się tego w jakimś momencie w innej formie, mówi Facebook.

Poprzednia wersja: Nowe funkcje w React 16.3

Wersja 16.3 Reacta z marca 2018 r. Wprowadza zmiany w cyklu życia, a także interfejs API kontekstu.

Zmiany cyklu życia w React 16.3

W cyklu życia komponentu nadchodzący tryb renderowania asynchronicznego rozciąga model interfejsu API komponentu klasy, który jest używany w sposób, który nie był pierwotnie zamierzony. Dlatego dodawane są nowe cykle życia, w tym getDerivedStateFromPropsjako bezpieczniejsza alternatywa dla dotychczasowego cyklu życia componentWillReceiveProps. Dodano również getSnapshotBeforeUpdate, aby wspierać bezpieczny odczyt właściwości, takich jak DOM przed aktualizacjami.

React 16.3 dodaje również przedrostek „niebezpieczny” do niektórych z tych cykli życia, takich jak to componentWillMounti componentWillReceiveUpdate. W takich przypadkach określenie „niebezpieczne” nie odnosi się do bezpieczeństwa, ale do faktu, że kod wykorzystujący te cykle życia jest bardziej podatny na błędy w przyszłych wersjach React.

Dzięki wydaniu React 16.3 programiści nie muszą nic robić ze starszymi metodami. To wydanie ma na celu zachęcenie opiekunów projektów open source do zaktualizowania swoich bibliotek przed ostrzeżeniami o wycofaniu, które zostaną włączone dopiero w przyszłej wersji w linii 16.x.

Wersja 16.3 dodaje StrictModekomponent, który identyfikuje komponenty z niebezpiecznymi cyklami życia. StrictMode, który działa tylko w trybie programistycznym, ostrzega również o używaniu starszego string ref API i wykrywa nieoczekiwane efekty uboczne. Aktywuje dodatkowe sprawdzenia dla potomków. Więcej funkcji zostanie dodanych później.

Interfejs API kontekstu obsługuje statyczne sprawdzanie typów i głębokie aktualizacje

Nowy kontekstowy interfejs API obsługuje statyczne sprawdzanie typów i głębokie aktualizacje. To API jest również bardziej wydajne niż poprzednia eksperymentalna wersja API, powiedział Brian Vaughn, członek podstawowego zespołu React JS na Facebooku. Kontekst umożliwia przekazywanie danych przez drzewo komponentów bez konieczności ręcznego przekazywania właściwości, z których niektóre obejmują preferencje regionalne i motyw interfejsu użytkownika. Stare API będzie nadal działać dla wydań React 16.x, dając użytkownikom czas na migrację.

Nowość w React 16.3:

  • Ulepszony interfejs API createrefAPIdo zarządzania referencjami, który zapewnia dostęp do węzłów DOM lub elementów React opracowanych w metodzie renderowania.
  • forwardRefAPI, pomagając przy wykorzystaniu elementów wyższego rzędu, które promują ponowne wykorzystanie kodu.

Poprzednia wersja: Nowe funkcje w React 16.2

Wersja React 16.2 z listopada 2017 r. Wprowadza fragmenty, które poprawiają obsługę wyświetlania wielu elementów potomnych z metody renderowania komponentów. Fragmenty, które przypominają puste znaczniki JSX, pozwalają programistom grupować listę dzieci bez dodawania węzłów do DOM.

Wersję 16.2 można zainstalować z rejestru NPM. Aby zainstalować za pomocą menedżera pakietów Yarn, uruchom yarn add [email protected]^16.2.0 [email protected]^16.2.0. Aby zainstalować go z NPM, uruchom npm install --save [email protected]^16.2.0 [email protected]^16.2.0.

Poprzednia wersja: Nowe funkcje w React 16.0

Nazwany „React Fibre” w trakcie opracowywania, React 16.0 z września 2017 r. To przeróbka rdzenia Reacta, poprawiająca postrzeganą responsywność dla złożonych aplikacji za pomocą nowego algorytmu uzgadniania. Kluczowe cechy React 16 to:

  • Błędy zawierające ślad stosu składników, aby ułatwić debugowanie.
  • Zwracanie ciągów / tablic bezpośrednio z metod renderowania komponentów.
  • Nowy, szybszy renderer strumieniowy po stronie serwera.
  • Bardziej natywna wydajność aplikacji.
  • Przejście od kontrowersyjnej licencji BSD + Patents na bardziej smaczną licencję MIT.

Chociaż wewnętrzne elementy Reacta zostały całkowicie przepisane w React 16, publiczny interfejs API jest „zasadniczo niezmieniony” - powiedziała Sophie Alpert, menedżer ds. Technicznych Facebooka w React. Celem było uratowanie programistów od konieczności przepisywania istniejących komponentów zbudowanych w React.

Nowy kod React 16 został napisany obok starego kodu w repozytorium GitHub, zgodnie ze znaną praktyką na Facebooku. Przełączenia między nimi wykonano za pomocą useFiberflagi funkcji Boolean . Ten proces pozwolił Facebookowi rozpocząć tworzenie nowej implementacji bez wpływu na istniejących użytkowników i kontynuować wprowadzanie poprawek do starej bazy kodu.

Po kilku miesiącach usuwania błędów Facebook zdecydował się dostarczyć jeden produkt, aby zmniejszyć możliwy zestaw błędów, zamiast utrzymywać dwie wersje Reacta na bieżąco.