Teraz, gdy wiemy, czym
jest React Native, rzućmy okiem za kulisy.
Jak już wspomniałem, przy pomocy React i React Native budujemy aplikację, a nasz kod zwykle wygląda mniej więcej
tak.
Budujemy normalne komponenty React, tak jak je znasz, z języka JavaScript, ponieważ JavaScript jest językiem,
którego używamy do tworzenia aplikacji
React Native, ale tutaj używamy specjalnych komponentów, takich jak widok i tekst.
To nie są twoje normalne elementy HTML, ponieważ normalne elementy HTML nie
są obsługiwane, platformy natywne nie wiedzą, jak ich używać, dlatego używasz specjalnych składników dostarczonych
przez React Native, dla których React Native jest w stanie przetłumaczyć je na
instrukcje platformy natywne rozumieją, więc tak to działa.
Teraz ważne jest, aby zrozumieć, że twoje widoki, więc komponenty, z którymi pracujesz, są w końcu kompilowane
do prawdziwych natywnych widgetów, do prawdziwych elementów natywnych, do prawdziwego kodu natywnego. Twój kod JavaScript, w którym zarządzasz logiką biznesową,
nie zostanie skompilowany, ale Twoje poglądy będą, a to oczywiście oznacza również,
że zazwyczaj uzyskujesz doskonałą wydajność podczas tworzenia aplikacji React Native, ponieważ wynikiem jest
prawdziwa aplikacja natywna, w której duża część kod jest prawdziwym rodzimym kodem.
Teraz, jeśli przyjrzymy się bliżej temu składnikowi, ważne jest, aby zrozumieć, że możesz oczywiście
używać React do tworzenia aplikacji internetowych, ale możesz także tworzyć aplikacje natywne dla Androida i iOS z natywnym
kodem, więc bez React Native lub że może korzystać z React Native, więc są to cztery różne
sposoby tworzenia aplikacji, w których React dla Internetu nie dostarczy nam natywnej aplikacji, a jedynie w celu
porównania, w jaki sposób będzie to powiązane.
Więc jeśli używasz React dla sieci, zwykle pracujesz z, powiedzmy div, aby ustrukturyzować zawartość.
Jeśli będziesz pracować bezpośrednio
z Androidem, więc zbudujesz swoją aplikację w Android Studio bez React Native, na przykład będziesz
pracować z widokiem Androida, który byłby widżetem, którego możesz używać w tworzonym interfejsie
użytkownika bezpośrednio z natywnymi funkcjami platformy w celu uporządkowania treści. W systemie iOS byłby to widżet widoku interfejsu użytkownika i nie
trzeba zapamiętywać tych terminów,
chcę tylko wyjaśnić, w jaki sposób React Native tłumaczy dla Ciebie, ponieważ w aplikacjach
React Native faktycznie używasz elementu widoku.
Teraz, gdy spojrzysz na ten element widoku, oczywiście zobaczysz, że jest bardzo
podobny do elementu div,
wygląda jak znacznik HTML, różnica polega na tym, że zaczyna się od dużej litery, a ten
widok nie jest znacznikiem HTML , przeglądarka nie wiedziałaby, co zrobić z widokiem, ale React
Native to robi, a React Native przetłumaczy ten widok na widok Androida lub widok interfejsu użytkownika i robi to
oczywiście nie tylko dla tego ogólnego elementu opakowania, ale na przykład, jeśli pobierasz dane wejściowe od użytkownika,
w sieci zrobiłbyś to z elementem wejściowym, jeśli zbudowałbyś natywną aplikację na Androida,
użyłbyś edycji tekstu, dla natywnej aplikacji na iOS użyłbyś pola tekstowego interfejsu użytkownika a w
React Native jest komponent do wprowadzania tekstu, ponownie React Native kompiluje to dla natywnych widżetów dla Ciebie
i tak działa React Native za kulisami. Oczywiście w tym kursie nie dbamy o sieć,
tylko dlatego, aby zrozumieć, że istnieją pewne podobieństwa, używamy tych tagów, które wyglądają jak tagi HTML, ale oczywiście istotną
różnicą jest to, że są to kompilowane specjalne komponenty do kodu natywnego. Teraz, jak już wspomniałem, ważne jest, aby zrozumieć,
że w przypadku interfejsu użytkownika React Native oferuje specjalne komponenty, które są następnie kompilowane
do użycia natywnego, dla twojej
innej logiki, więc jeśli używasz Redux lub jeśli masz jakąkolwiek logikę biznesową, możesz:
wysyłając żądania HTTP, transformujesz dane, cały twój inny kod JavaScript nie jest skompilowany do kodu natywnego, ale zamiast tego działa
w specjalnym wątku hostowanym przez React Native. Możesz więc wyobrazić sobie swoją aplikację React Native,
którą ostatecznie otrzymujesz jako prawdziwą aplikację natywną, ponieważ jest to ta, w której wszystkie
widoki zostały skompilowane do natywnych widżetów, ale w której znajduje się dodatkowa mini aplikacja wewnątrz aplikacji, mini Javascript działająca tam
aplikacja hostowana i uruchamiana przez React Native, która uruchamia cały kod JavaScript, a następnie kod JavaScript może rozmawiać z
platformą macierzystą.
Możesz to sobie wyobrazić tutaj, masz swój kod, swoją aplikację i tworzysz natywną aplikację, która
działa na natywnej platformie i oczywiście masz pewne funkcje platformy, takie jak na
przykład używanie kamery urządzenia.
Teraz, jak już wspomniano, twój kod można podzielić na dwie rzeczy - twoje poglądy i
logikę biznesową, a więc drugi kod JavaScript. Teraz, jak już wspomniano wiele razy, twoje
widoki są kompilowane do widoków natywnych, do natywnych widżetów dla tych platform, a twój kod jest jednak przechowywany jako kod JavaScript
i możesz korzystać z funkcji platformy natywnej, takich jak kamera, ponieważ kod JavaScript działa w specjalnym wirtualnym
maszyna w końcu, uruchomiona i obsługiwana przez React Native w Twojej aplikacji, więc właściwa
część znajduje się w naszej natywnej aplikacji, którą wysyłamy do sklepów z aplikacjami, a ten kod
JavaScript, ta wirtualna maszyna JavaScript, umie mówić do funkcji platformy natywnej, a więc do
systemu operacyjnego, na którym aplikacja jest uruchomiona, poprzez specjalny mostek,
który można powiedzieć, i ten most oraz maszynę wirtualną, wszystko to automatycznie dostarczane przez React Native.
Nie musisz się
tym przejmować, wszystko, co musisz zrobić, to napisać aplikację React Native z Javascriptem i tymi specjalnymi komponentami, i to wszystko, co musisz
teraz wiedzieć, oto jak działa
aplikacja React Native za kulisami, a ja ważne jest, aby zdawać sobie z tego sprawę, ponieważ zabiera to trochę
magii w pozytywnym sensie, ponieważ rozumiesz, co tak naprawdę piszesz i co się stanie z twoim kodem oraz
jak ten kod kończy się w natywnej aplikacji i oczywiście, rozumiesz również,
że w końcu masz prawdziwą natywną aplikację. Nie cały kod jest skompilowany, byłoby
to prawie
niemożliwe, ale twoje widoki są skompilowane i oczywiście widoki, więc część, którą widzi użytkownik,
jest najważniejszą częścią, jeśli chodzi o wydajność aplikacji, ponieważ ponowne renderowanie interfejsu użytkownika i
to wszystko, zazwyczaj jest to
część wymagająca dużej wydajności, dlatego bardzo dobrze jest, że jest ona skompilowana i
jest to jedna z ogromnych zalet React Native.