Najlepsze pytania i odpowiedzi na rozmowę dla programisty React Native

Aplikacje natywne instaluje się ze sklepu z aplikacjami (takiego jak Google Play czy Apple App Store). Są projektowane pod jedną platformę i mogą w pełni korzystać ze wszystkich funkcji urządzenia - aparatu, GPS-a, akcelerometru, kompasu, listy kontaktów i tak dalej.

React Native służy do aplikacji mobilnych, a React do stron internetowych (front-endu). Oba frameworki stworzył Facebook. React Native jest frameworkiem wieloplatformowym, co oznacza, że możesz napisać niemal ten sam kod na iOS i Androida i będzie on działać.

JSX to skrót od JavaScript XML. To po prostu rozszerzenie składni JavaScriptu. Pozwala pisać HTML bezpośrednio w Reakcie (w kodzie JavaScript). Tworzenie szablonu z użyciem JSX w Reakcie jest proste, ale to nie jest zwykły język szablonów, tylko pełna moc JavaScriptu.

Aplikacje hybrydowe łączą funkcjonalność aplikacji natywnych i webowych. Można je pobrać ze sklepu z aplikacjami danej platformy tak jak aplikację natywną. Buduje się je z użyciem technologii webowych, takich jak HTML, CSS i JavaScript, podczas gdy aplikacje natywne powstają w konkretnej technologii i języku właściwym dla platformy - Javie na Androida, Swifcie na iOS.

Props służą do przekazywania danych od rodzica do dziecka, a state do operowania danymi wewnątrz komponentu. Wartość propsów otrzymujemy z komponentu nadrzędnego, natomiast wartość obiektu state pochodzi z danych początkowych zdefiniowanych w metodzie constructor ().

Redux to przewidywalny kontener stanu, który pomaga pisać aplikacje JavaScript działające spójnie w środowisku klienta, serwera i natywnym oraz łatwe do testowania. Choć używa się go głównie jako narzędzia do zarządzania stanem w Reakcie, sprawdzi się z dowolnym innym frameworkiem lub biblioteką JavaScript.

Kluczowa różnica polega na tym, że state jest wewnętrzny i kontrolowany przez sam komponent, a props są zewnętrzne i kontrolowane przez to, co renderuje dany komponent.

Komponenty to niezależne fragmenty kodu wielokrotnego użytku. Pełnią tę samą rolę co funkcje JavaScript, ale działają w izolacji i zwracają HTML przez funkcję render (). Są dwa rodzaje komponentów: klasowe i funkcyjne. 

Możesz mieć jedną bazę kodu. Ale:

• komponenty wymagające innej obsługi na iOS i Androidzie wydziel do plików `filename.ios.js` i` filename.android.js`
• gdy różnice są drobne (np. style), możesz użyć `Platform`, żeby rozpoznać, na którą platformę celujesz.

TextInput to główny komponent pozwalający użytkownikowi wpisywać tekst. Ma prop onChangeText, który przyjmuje funkcję wywoływaną przy każdej zmianie tekstu, oraz prop onSubmitEditing, przyjmujący funkcję wywoływaną przy zatwierdzeniu tekstu.

Różnica polega na tym, że Live Reloading przeładowuje całą aplikację. Wygląda to tak: plik się zmienił, więc przeładuj całą aplikację. Hot reload nie przeładowuje całej aplikacji - po prostu podmienia zmieniony kod i zachowuje stan aplikacji.

ScrollView to wbudowany, responsywny komponent pełniący rolę uniwersalnego przewijalnego kontenera, w którym można przewijać komponenty i widoki potomne. Umożliwia przewijanie w obu kierunkach - pionowym i poziomym (domyślnie pionowym).

W React Native aplikację stylujesz JavaScriptem. Wszystkie podstawowe komponenty przyjmują właściwość style. Nazwy i wartości styli zwykle odpowiadają temu, jak działa CSS w sieci, z tą różnicą, że nazwy zapisuje się w camelCase, na przykład backgroundColor zamiast background-color

Aplikacja React Native ma dwie strony: javascriptową i natywną. React Native Bridge pozwala kodowi natywnemu i javascriptowemu komunikować się ze sobą. Bez mostu kod natywny nie przekaże żadnych informacji do kodu JavaScript i odwrotnie.

Komponenty touchable pozwalają przechwytywać dotknięcia. Można ich użyć zamiast podstawowego przycisku, jeśli ten nie pasuje do Twojej aplikacji. Z ich pomocą tworzysz własny przycisk. Klikając w te komponenty, możesz na przykład wyświetlić opinię.

React używa wirtualnego DOM-u, żeby poprawić wydajność. Wykorzystuje obserwowalne obiekty do wykrywania zmian stanu i właściwości. Do porównywania wersji wirtualnego DOM-u stosuje wydajny algorytm różnicowy. Następnie wysyła zbiorcze aktualizacje do prawdziwego DOM-u, żeby przerysować lub ponownie wyrenderować interfejs.

Tak. React Native bezproblemowo integruje komponenty napisane w Objective-C, Javie lub Swifcie.

Robi kilka rzeczy: zbiera cały kod JavaScript w jeden plik i tłumaczy kod, którego urządzenie nie rozumie (na przykład JSX albo nowszą składnię JS). Zamienia też zasoby (takie jak pliki PNG) na obiekty, które może wyświetlić komponent obrazu.

Virtual DOM tworzy kopię całego obiektu DOM, a Shadow DOM tworzy małe fragmenty obiektu DOM z własnym, odizolowanym zakresem dla elementu, który reprezentują.

Przejście na React Native przy tworzeniu aplikacji mobilnych to dobry wybór, gdy:

• Tworzysz prostą i jednolitą aplikację.
• Chcesz uruchomić aplikację na wielu platformach.
• Masz mniejszy budżet na rozwój aplikacji.
• Chcesz wejść na rynek jak najszybciej.
• Budujesz aplikację społecznościową w stylu Facebooka czy Instagrama.
• Planujesz wykorzystać w aplikacji reklamy Facebooka.
• Tworzysz aplikację e-commerce.

Czasem trzeba wprowadzić zmiany bezpośrednio w komponencie, bez użycia stanu i właściwości, żeby nie wywoływać ponownego renderowania całego poddrzewa. Na przykład korzystając z Reacta w przeglądarce, czasem musisz zmodyfikować węzeł DOM bezpośrednio - tak samo jest z widokami w aplikacjach mobilnych. setNativeProps to odpowiednik ustawiania właściwości wprost na węźle DOM w React Native.

Użyj setNativeProps, jeśli częste ponowne renderowanie staje się wąskim gardłem wydajności.

Bezpośrednia manipulacja nie będzie narzędziem, po które sięgasz często; zwykle użyjesz jej tylko przy ciągłych animacjach, żeby uniknąć narzutu renderowania hierarchii komponentów i uzgadniania wielu widoków. setNativeProps przechowuje stan na swoim własnym poziomie (DOM, UIView itd.), a nie w komponentach Reacta, przez co kod staje się trudniejszy do zrozumienia. Zanim go użyjesz, spróbuj rozwiązać problem za pomocą setState i shouldComponentUpdate.

Fabric to nowa, zaproponowana przez społeczność architektura React Native, która ma zbliżyć interfejs aplikacji mobilnej do aplikacji natywnych albo je przewyższyć. Tak jak architektura Fiber w ReactJS znacząco poprawiła różnicowanie i ogólną wydajność, tak Fabric ma pójść w tym samym kierunku i poprawić wydajność oraz efektywność aplikacji.

InteractionManager pozwala zaplanować długo trwające zadania po zakończeniu interakcji i animacji. Dzięki temu animacje w JavaScripcie działają płynnie.

Własny hook to funkcja JavaScript, którą tworzymy sami, gdy chcemy podzielić logikę między inne funkcje JavaScript. Pozwala to używać tego samego fragmentu kodu w wielu miejscach aplikacji.

CDD to metodyka wytwarzania, która wiąże proces budowy z komponentami. To podejście, w którym interfejs powstaje oddolnie: od poziomu komponentu do poziomu strony lub ekranu.

Zalety architektury komponentowej:

• Większa kontrola i niższe koszty utrzymania. 
• Koniec z szukaniem innych aplikacji, które mogą używać podobnego kodu. 
• Szybsze wytwarzanie, które oszczędza czas i zwiększa przychody.

Geolokalizacja jest domyślnie włączona, gdy tworzysz projekt komendą react-native init. Żeby włączyć geolokalizację w tle, dodaj klucz NSLocationAlwaysUsageDescription w Info.plist i zaznacz lokalizację jako tryb działania w tle w zakładce Features w Xcode.

• Użyj Proguarda, żeby zmniejszyć rozmiar aplikacji (usuwa on te fragmenty javowego bajtkodu React Native i jego zależności, z których aplikacja nie korzysta)
• Twórz mniejsze pliki APK pod konkretne architektury procesorów. Dzięki temu użytkownicy automatycznie dostaną plik APK pasujący do architektury ich telefonu. Nie trzeba wtedy przechowywać binariów JSCore obsługujących wiele architektur, co zmniejsza rozmiar aplikacji.
• Kompresuj obrazy i inną grafikę. Rozmiar obrazów zmniejszysz też, używając formatów takich jak APNG zamiast PNG.
• Nie przechowuj surowych danych JSON - lepiej je skompresować albo zamienić na statyczne identyfikatory obiektów.
• Optymalizuj własne biblioteki.
• Ogranicz liczbę operacji na stanie i pamiętaj, żeby w razie potrzeby używać komponentów czystych i memoizowanych.
• Korzystaj z globalnego stanu z głową - w najgorszym razie zmiana stanu pojedynczej kontrolki, takiej jak TextInput czy CheckBox, wywoła ponowne renderowanie całej aplikacji. Do lepszego zarządzania stanem użyj bibliotek takich jak Redux czy Overmind.js.
• Używaj atrybutu key na elementach listy - pomaga to React Native wybrać, którą listę odświeżyć przy renderowaniu długiego zestawu danych.
• Przy dużych zbiorach danych używaj VirtualizedList, FlatList i SectionList.
• Czyść wszystkie aktywne timery - mogą one prowadzić do poważnych wycieków pamięci.

• Przy pierwszym uruchomieniu aplikacji główny wątek rozpoczyna pracę i ładuje paczki JS.
• Po poprawnym załadowaniu kodu JavaScript główny wątek przekazuje go do osobnego wątku JS, bo gdy JS wykonuje ciężkie obliczenia i na chwilę zapycha wątek, wątek interfejsu nie ucierpi.
• Gdy React zaczyna renderowanie, Reconciler zaczyna „rozróżniać”, a kiedy wygeneruje nowy wirtualny DOM (układ), przesyła zmiany do kolejnego wątku (shadow thread).
• Wątek shadow oblicza układ, a następnie przesyła parametry i obiekty układu do głównego wątku (UI). (Możesz zapytać, dlaczego nazywa się „shadow”? Bo generuje węzły shadow)
• Ponieważ tylko główny wątek może cokolwiek wyświetlić na ekranie, wątek shadow musi przekazać mu wygenerowany układ i dopiero wtedy interfejs jest renderowany.

Testy migawkowe to rodzaj testów „porównywania wyniku” albo „golden master”. Zapobiegają regresji, porównując bieżący wynik metody w kodzie aplikacji z zapisanymi „dobrymi” wartościami.

Główny powód, dla którego dobrze zaprojektowane aplikacje natywne działają tak płynnie, jest taki, że unikają kosztownych interakcji i animacji. React Native ma ograniczenie w postaci jednego wątku wykonania JS, ale możesz użyć InteractionManagera, żeby długie zadania uruchamiały się dopiero po zakończeniu interakcji i animacji.

Aplikacje mogą planować zadania po interakcji z następującymi obiektami:

InteractionManager.runAfterInteractions(() => {
 // ...long-running synchronous task...
});

Pozwala tworzyć pipeline'y dostarczania, które zbudują, przetestują i wdrożą aplikację React Native jednym kliknięciem na gałęzi. Pipeline'y składają się z akcji, które możesz dopasować do swoich potrzeb.

Dostępne narzędzia:

• AppCenter: konfiguracja przez web, przechowywana po stronie usługi

• appcircle: konfiguracja przez web, przechowywana po stronie usługi

• Azure DevOps: azure-pipelines-android.yml

• Bitbucket Pipelines: bitbucket-pipelines.yml

• Bitrise: bitrise.yml

• Buddy: buddy.yml

• Circle CI: .circleci/config.yml

• Codemagic: codemagic.yaml

• GitHub Actions: .github/workflows/*.yml

• Gitlab CI: .gitlab-ci.yml

• Travis CI: .travis.yml