Przejdź do treści głównej

React Native 0.80 - React 19.1, zmiany w JS API, zamrożenie architektury Legacy i wiele więcej

· 10 minut czytania
Jorge Cohen
Jorge Cohen
Engineering Manager @ Meta
Fabrizio Cucci
Fabrizio Cucci
Software Engineer @ Meta
Gabriel Donadel Dall'Agnol
Gabriel Donadel Dall'Agnol
Software Engineer @ Expo
Christian Falch
Christian Falch
Software Engineer @ Expo
Nieoficjalne Tłumaczenie Beta

Ta strona została przetłumaczona przez PageTurner AI (beta). Nie jest oficjalnie zatwierdzona przez projekt. Znalazłeś błąd? Zgłoś problem →

Z radością ogłaszamy wydanie React Native 0.80!

Ta wersja aktualizuje Reacta dostarczanego z React Native do najnowszej stabilnej wersji: 19.1.0.

Dostarczamy także szereg ulepszeń stabilności naszego JS API: głębokie importy będą teraz wyświetlać ostrzeżenia, a także wprowadzamy nową opcjonalną funkcję Strict TypeScript API oferującą dokładniejsze i bezpieczniejsze typy.

Co więcej, architektura Legacy React Native jest teraz oficjalnie zamrożona, a użytkownicy zaczną widzieć ostrzeżenia dotyczące API, które przestaną działać po całkowitym wycofaniu architektury Legacy.

Najważniejsze zmiany

Najważniejsze zmiany

Wycofanie głębokich importów JavaScript

W tej wersji podejmujemy kroki w celu poprawy i stabilizacji publicznego JavaScript API React Native. Pierwszym etapem jest lepsze określenie zakresu API, które mogą importować aplikacje i frameworki. W związku z tym formalnie wycofujemy głębokie importy z React Native (zobacz RFC) i wprowadzamy ostrzeżenia przez ESLint oraz konsolę JS.

Te ostrzeżenia dotyczą importów z kodu źródłowego twojego projektu i można z nich zrezygnować. Pamiętaj jednak, że naszym celem jest usunięcie głębokich importów z API React Native w przyszłych wersjach - należy je zaktualizować do importów z głównego poziomu.

// Before - import from subpath
import {Alert} from 'react-native/Libraries/Alert/Alert';

// After - import from `react-native`
import {Alert} from 'react-native';

Niektóre API nie są eksportowane na głównym poziomie i staną się niedostępne bez głębokich importów. Jest to działanie celowe, mające na celu zmniejszenie ogólnej powierzchni API React Native. Prowadzimy otwarty wątek dyskusyjny dotyczący problemów użytkowników i będziemy współpracować ze społecznością, aby ustalić, które API będziemy eksportować przez (co najmniej) kolejne dwie wersje React Native. Podziel się swoją opinią!

Więcej o tej zmianie dowiesz się z dedykowanego posta: Dążenie do stabilnego API JavaScript.

Opcjonalne Strict TypeScript API

Wraz z powyższą redefinicją eksportów w publicznym API, dostarczamy również nowy zestaw typów TypeScript dla pakietu react-native w wersji 0.80, który nazywamy Strict TypeScript API.

Wybór Strict TypeScript API to podgląd przyszłego stabilnego JavaScript API dla React Native. Nowe typy charakteryzują się:

  1. Generowaniem bezpośrednio z kodu źródłowego - zwiększają pokrycie i poprawność, co zapewnia silniejsze gwarancje kompatybilności.

  2. Ograniczeniem do pliku indeksowego React Native - ściślej definiują nasze publiczne API, co oznacza, że nie naruszymy API przy zmianach wewnętrznych plików.

Dostarczamy je obok istniejących typów, co oznacza, że możesz migrować, gdy będziesz gotowy. Ponadto, jeśli używasz standardowych API React Native, wiele aplikacji powinno działać bez zmian. Gorąco zachęcamy pionierów i nowo tworzone aplikacje do włączenia tej opcji poprzez plik tsconfig.json.

Gdy społeczność będzie gotowa, Strict TypeScript API stanie się domyślnym API w przyszłości — zsynchronizowanym z usunięciem głębokich importów.

Więcej o tej zmianie dowiesz się z dedykowanego posta: Dążenie do stabilnego API JavaScript.

Zamrożenie Architektury Legacy i Ostrzeżenia

Nowa Architektura React Native jest domyślnym wyborem od wersji 0.76 i czytamy o historiach sukcesu projektów i narzędzi, które na niej skorzystały.

Niedawno poinformowaliśmy, że uznajemy Architekturę Legacy za zamrożoną. Nie będziemy już rozwijać nowych poprawek błędów ani funkcji w tej architekturze i zaprzestaniemy jej testowania podczas prac nad wydaniami.

Aby ułatwić migrację, nadal umożliwiamy rezygnację z Nowej Architektury w przypadku napotkania błędów lub regresji.

Jednak dostarczanie dwóch architektur w React Native to ogromne wyzwanie, wpływające na wydajność działania, rozmiar aplikacji i utrzymanie kodu źródłowego.

Dlatego w przyszłości będziemy musieli ostatecznie wycofać Architekturę Legacy.

W wersji 0.80 dodaliśmy serię ostrzeżeń pojawiających się w React Native DevTools, jeśli używasz API, które nie będą działać w Nowej Architekturze.

Zalecamy, aby nie ignorować tych ostrzeżeń i rozważyć migrację aplikacji oraz bibliotek do Nowej Architektury, aby być gotowym na przyszłość.

ostrzeżenia dotyczące architektury legacy

Więcej o tych zmianach dowiesz się z prezentacji "Life After Legacy: The New Architecture Future" którą niedawno przedstawiliśmy na App.js.

React 19.1.0

Ta wersja React Native zawiera najnowszą stabilną wersję Reacta: 19.1.0.

Wszystkie nowe funkcje i poprawki błędów w React 19.1.0 opisano w informacjach o wydaniu.

ostrzeżenie

Godną uwagi funkcją React 19.1.0 jest implementacja i ulepszenia stosów właścicieli (owner stacks). To funkcja tylko deweloperska, która pomoże zidentyfikować komponent odpowiedzialny za konkretny błąd.

Niestety, wiemy że stosy właścicieli nie działają zgodnie z oczekiwaniami w React Native, jeśli używasz wtyczki Babela @babel/plugin-transform-function-name (domyślnie włączonej w predefiniowanych ustawieniach Babela dla React Native). Naprawę tego problemu dostarczymy w przyszłej wersji React Native.

Eksperymentalne - Zależności React Native dla iOS są teraz prekompilowane

Jeśli budujesz aplikację React Native na iOS, pewnie zauważyłeś że pierwsza natywna kompilacja trwa dłużej: kilka minut lub nawet dłużej na starszych maszynach. Dzieje się tak, ponieważ musimy skompilować cały kod React Native dla iOS wraz z jego zależnościami.

W ostatnich tygodniach eksperymentowaliśmy z prekompilacją części rdzenia React Native dla iOS (podobnie jak na Androidzie), aby skrócić czas budowania przy pierwszym uruchomieniu aplikacji.

React Native 0.80 to pierwsze wydanie, które może dostarczyć część React Native dla iOS jako prekompilowaną, co pomoże zmniejszyć czasy budowania.

Podczas procesu wydawania React Native tworzymy XCFramework o nazwie ReactNativeDependencies.xcframework, który zawiera prekompilowaną wersję zewnętrznych zależności wymaganych przez React Native.

Przeprowadziliśmy testy wydajnościowe, aby zmierzyć oszczędność czasu dzięki tej wstępnej prekompilacji dla iOS. Na maszynie z procesorem M4 kompilacje iOS są o około 12% szybsze przy użyciu prekompilacji w porównaniu z kompilacją ze źródeł.

Z naszych obserwacji wynika również, że wiele zgłoszeń błędów od użytkowników wynika z problemów kompilacyjnych związanych z zależnościami React Native (np. #39568). Prekompilacja zewnętrznych zależności pozwala nam przygotować je za Ciebie, dzięki czemu unikniesz tych problemów.

Uwaga: nie prekompilujemy całego React Native - tylko biblioteki, którymi Meta nie zarządza bezpośrednio, takie jak Folly czy GLog.

W przyszłych wersjach udostępnimy również resztę rdzenia React Native jako prekompilację.

Jak z nich korzystać

Ta funkcja jest nadal eksperymentalna, więc nie jest domyślnie włączona.

Aby z niej skorzystać, zainstaluj pody z dodatkową zmienną środowiskową RCT_USE_RN_DEP:

RCT_USE_RN_DEP=1 bundle exec pod install

Alternatywnie, aby włączyć ją dla wszystkich developerów w projekcie, zmodyfikuj swój Podfile w następujący sposób:

if linkage != nil
Pod::UI.puts "Configuring Pod with #{linkage}ally linked Frameworks".green
use_frameworks! :linkage => linkage.to_sym
end

+ENV['RCT_USE_RN_DEP'] = '1'

target 'HelloWorld' do
config = use_native_modules!

Prosimy o zgłaszanie ewentualnych problemów związanych z prekompilacjami w tej dyskusji. Zbadamy je i zapewnimy, że ta funkcja będzie działać transparentnie w Twojej aplikacji.

Inne zmiany

Android - Mniejszy rozmiar APK dzięki IPO

Ta wersja znacząco redukuje rozmiar wszystkich aplikacji Android budowanych z React Native. Od wersji 0.80 włączyliśmy Optymalizację Międzyproceduralną (IPO) zarówno dla React Native, jak i Hermesa.

Dzięki temu rozmiar wszystkich aplikacji Android zmniejszył się o około 1 MB.

porównanie rozmiaru apk dla Androida

Tę optymalizację uzyskasz automatycznie po aktualizacji do React Native 0.80 - bez dodatkowych zmian w projekcie.

Nowy wygląd ekranu startowego

Jeśli nie używasz Expo, ale korzystasz z Community CLI i szablonu, w tej wersji przenieśliśmy ekran startowy do własnego pakietu i odświeżyliśmy jego wygląd. To redukuje początkowy boilerplate w nowych aplikacjach tworzonych z Community Template i zapewnia lepsze doświadczenie na większych ekranach.

Nowy wygląd ekranu startowego

Informacja o wsparciu społeczności dla JSC

React Native 0.80 to ostatnia wersja z natywnym wsparciem JSC. Dalsze wsparcie dla JSC będzie dostępne poprzez pakiet społecznościowy @react-native-community/javascriptcore.

Jeśli przegapiłeś ogłoszenie, możesz przeczytać więcej tutaj

Zmiany łamiące kompatybilność

Dodano pole "exports" w głównym pakiecie

W ramach zmian w stabilnym API JavaScript dodaliśmy pole "exports" w pliku package.json pakietu react-native.

W wersji 0.80 to mapowanie nadal udostępnia wszystkie ścieżki JavaScript domyślnie, więc nie powinno być znaczącą zmianą łamiącą kompatybilność. Jednocześnie może to subtelnie wpłynąć na sposób rozwiązywania modułów wewnątrz pakietu react-native:

  • W przypadku Metro, rozszerzenia specyficzne dla platformy nie będą automatycznie rozszerzane względem dopasowań "exports". Dostarczyliśmy moduły pośredniczące (shim) obsługujące tę zmianę (#50426).

  • W przypadku Jest, możliwość mockowania głębokich importów może ulec zmianie, co może wymagać aktualizacji testów.

Inne zmiany łamiące kompatybilność

Poniższa lista zawiera inne zmiany łamiące kompatybilność, które mogą mieć niewielki wpływ na kod produktu i warto je odnotować:

JS

  • Zaktualizowaliśmy eslint-plugin-react-hooks z wersji v4.6.0 do v5.2.0 (pełny changelog tutaj). Reguły lintowania react-hooks mogą generować nowe błędy wymagające naprawy lub wyłączenia.

Android

  • W tej wersji zaktualizowaliśmy Kotlin do wersji 2.1.20. Kotlin 2.1 wprowadza nowe funkcje języka w wersji preview, które możesz zacząć używać w modułach/komponentach. Więcej informacji w oficjalnych informacjach o wydaniu.

  • Usunęliśmy klasę StandardCharsets. Była przestarzała od wersji 0.73. Zamiast niej używaj klasy java.nio.charset.StandardCharsets.

  • Kilka klas uczyniliśmy wewnętrznymi. Nie są częścią publicznego API i nie powinny być używane. Powiadomiliśmy lub przesłaliśmy poprawki do dotkniętych bibliotek:

    • com.facebook.react.fabric.StateWrapperImpl
    • com.facebook.react.modules.core.ChoreographerCompat
    • com.facebook.react.modules.common.ModuleDataCleaner
  • Przepisaliśmy kilka klas z Javy na Kotlina. Jeśli ich używasz, typy i możliwość użycia wartości null w niektórych parametrach uległy zmianie - możesz potrzebować dostosować kod:

    • Wszystkie klasy w com.facebook.react.devsupport
    • com.facebook.react.bridge.ColorPropConverter
    • com.facebook.react.views.textinput.ReactEditText
    • com.facebook.react.views.textinput.ReactTextInputManager

iOS

  • Usunęliśmy pole RCTFloorPixelValue z RCTUtils.h - metoda RCTFloorPixelValue nie była używana w React Native i została całkowicie usunięta.

Dalsze mniejsze zmiany łamiące kompatybilność wymieniono w CHANGELOG dla wersji 0.80.

Podziękowania

React Native 0.80 zawiera ponad 1167 commitów od 127 współtwórców. Dziękujemy za całą waszą ciężką pracę!

Specjalne podziękowania kierujemy do członków społeczności, którzy wnieśli znaczący wkład w tę wersję:

Dziękujemy również dodatkowym autorom, którzy pracowali nad dokumentacją funkcji w tym poście:

  • Riccardo Cipolleschi za opracowanie części dotyczącej prekompilacji zależności React Native dla iOS

  • Alex Hunt za deprecjację głębokich importów, Strict TypeScript API i przeprojektowanie ekranu nowej aplikacji

  • Nicola Corti za zamrożenie architektury Legacy i ostrzeżenia

Aktualizacja do wersji 0.80

Do sprawdzenia zmian w kodzie między wersjami React Native w istniejących projektach, oprócz dokumentacji aktualizacji, użyj React Native Upgrade Helper.

Aby utworzyć nowy projekt:

Jeśli używasz Expo, React Native 0.80 będzie obsługiwany w wydaniu canary Expo SDK. Instrukcje dotyczące używania React Native 0.80 w Expo są również dostępne w dedykowanym poście na blogu.

informacja

Wersja 0.80 jest teraz najnowszą stabilną wersją React Native, a wersja 0.77.x przechodzi do stanu nieobsługiwanego. Więcej informacji można znaleźć w polityce wsparcia React Native. Planujemy opublikować końcową aktualizację kończącą cykl życia wersji 0.77 w najbliższej przyszłości.