Przejdź do treści głównej

Fabric

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 →

Fabric to nowy system renderujący React Native, będący ewolucją koncepcyjną poprzedniego systemu. Jego główne założenia to scentralizowanie logiki renderowania w C++, poprawa interoperacyjności z platformami hostującymi oraz umożliwienie nowych funkcjonalności w React Native. Rozwój rozpoczął się w 2018 roku, a w 2021 roku React Native w aplikacji Facebooka korzysta już z nowego renderera.

Ta dokumentacja zawiera przegląd nowego renderera i jego koncepcji. Pomija specyfikę platform i nie zawiera fragmentów kodu ani wskazówek implementacyjnych. Obejmuje kluczowe koncepcje, motywacje, korzyści oraz przegląd procesu renderowania w różnych scenariuszach.

Motywacje i korzyści nowego renderera​

Architektura renderowania powstała, aby umożliwić lepsze doświadczenia użytkownika, niemożliwe do osiągnięcia w starszej architekturze. Przykłady obejmują:

  • Dzięki lepszej interoperacyjności między widokami hostującymi a widokami React, renderer może synchronicznie mierzyć i renderować powierzchnie Reacta. W starszej architekturze układ React Native był asynchroniczny, co powodowało problem "skoku" układu przy osadzaniu widoku React Native w widoku hostującym.

  • Dzięki obsłudze zdarzeń wielopriorytetowych i synchronicznych, renderer może nadać priorytet określonym interakcjom użytkownika, zapewniając ich terminowe przetwarzanie.

  • Integracja z React Suspense, która umożliwia bardziej intuicyjne projektowanie pobierania danych w aplikacjach Reacta.

  • Umożliwienie działania funkcji współbieżnych Reacta w React Native.

  • Łatwiejsza implementacja renderowania po stronie serwera (server-side rendering) dla React Native.

Nowa architektura zapewnia również korzyści w jakości kodu, wydajności i rozszerzalności:

  • Bezpieczeństwo typów: generowanie kodu zapewniające bezpieczeństwo typów między JavaScriptem a platformami hostującymi. Generowanie wykorzystuje deklaracje komponentów JavaScript jako źródło prawdy do tworzenia struktur C++ przechowujących propsy. Niezgodność między właściwościami komponentów JavaScript i hostujących powoduje błąd budowania.

  • Wspólny rdzeń C++: renderer jest zaimplementowany w C++, a jego rdzeń jest współdzielony między platformami. Zwiększa to spójność i ułatwia adoptowanie React Native na nowych platformach.

  • Lepsza interoperacyjność z platformą hostującą: Synchroniczne i bezpieczne wątkowo obliczanie układu poprawia doświadczenia użytkownika przy osadzaniu komponentów hostujących w React Native, co ułatwia integrację z frameworkami platform hostujących wymagającymi synchronicznych API.

  • Lepsza wydajność: Dzięki wieloplatformowej implementacji systemu renderowania, wszystkie platformy korzystają z optymalizacji wymuszonych ograniczeniami jednej platformy. Np. spłaszczanie widoków (view flattening) powstało jako rozwiązanie wydajnościowe dla Androida, a teraz jest domyślnie dostępne na Androidzie i iOS.

  • Spójność: Wieloplatformowy system renderowania ułatwia utrzymanie spójności między różnymi platformami.

  • Szybsze uruchamianie: Komponenty hostujące są domyślnie inicjalizowane leniwie (lazy initialization).

  • Mniejsza serializacja danych między JS a platformą hostującą: React przesyłał dane między JavaScriptem a platformą hostującą jako serializowany JSON. Nowy renderer usprawnia transfer danych poprzez bezpośredni dostęp do wartości JavaScript za pomocą interfejsów JavaScript (JSI).