React vs React Native: mapa elementów i kiedy czego używać | We.Inc
React buduje interfejsy webowe z elementów HTML, a React Native buduje aplikacje na iOS i Androida z natywnych widoków. Zobacz natywny odpowiednik każdego elementu webowego i co możesz współdzielić.
React to biblioteka, a React Native używa jej do budowania aplikacji na iOS i Androida. W React w przeglądarce renderujesz elementy HTML, takie jak div i button, na stronie. React Native renderuje własne komponenty, takie jak View i Text, które stają się prawdziwymi widokami platformy. Komponenty, propsy, stan i hooki działają w obu tak samo.
Props style z obiektami JavaScript, często ze StyleSheet.create
Domyślny kierunek flex
row (przy display: flex)
Obsługa dotknięcia lub kliknięcia
onClick
onPress
Wspólne
Komponenty, JSX, propsy, stan, hooki
Komponenty, JSX, propsy, stan, hooki
Najszybciej zobaczysz różnicę, tłumacząc element webowy na jego natywny odpowiednik. Wyszukaj w mapie poniżej znacznik HTML, props lub nawyk z CSS, a każdy wiersz poda zamiennik w React Native z krótką notatką o tym, co działa inaczej.
Wpisz w pole wyszukiwania element HTML, props lub pojęcie z CSS, na przykład img, onClick lub class.
Przeczytaj kolumnę React Native, aby poznać zastępczy komponent, props lub API.
Sprawdź notatkę o zachowaniu, które się zmienia, na przykład wymagane rozmiary obrazów czy tekst, który musi być wewnątrz Text.
Skorzystaj z przykładów kodu niżej, aby zobaczyć tę samą małą kartę napisaną dla obu platform.
Jeśli oba są dla Ciebie nowe, najpierw naucz się Reacta w przeglądarce. Wszystko o komponentach, stanie i hookach się przenosi, a narzędzia przeglądarki łatwiej wykorzystać do debugowania.
Trzymaj pobieranie danych, walidację i logikę stanu w zwykłych modułach TypeScript bez importów z react-dom ani react-native. Te pliki można współdzielić między aplikacją webową a mobilną.
Licz się z przebudową warstwy wizualnej. Znaczniki i CSS nie przenoszą się do natywnych komponentów, więc zaplanuj czas na ekrany, nawet gdy logika jest wspólna.
Każdemu zdalnemu Image nadaj jawną szerokość i wysokość. W przeciwieństwie do znacznika img nie dopasowuje on rozmiaru do pobranego pliku.
Najczęściej zadawane pytania
Czy React Native to to samo co React?
Nie. React to biblioteka komponentów, a React Native to framework, który używa Reacta do sterowania natywnymi widokami mobilnymi. Komponenty piszesz tak samo, ale renderujesz View, Text i inne natywne komponenty zamiast HTML, i nie ma DOM przeglądarki.
Czy mogę używać HTML i CSS w React Native?
Nie bezpośrednio. Nie ma elementów div ani span ani plików CSS. Style to obiekty JavaScript z nazwami w camelCase, które w większości odpowiadają CSS, a układ korzysta z flexbox z kilkoma innymi wartościami domyślnymi.
Czego uczyć się najpierw: Reacta czy React Native?
W większości przypadków najpierw Reacta. Własna dokumentacja React Native uczy komponentów, JSX, propsów i stanu Reacta jako podstaw, a ćwiczenie ich w przeglądarce daje szybszą informację zwrotną.
Czy aplikacja webowa w React i aplikacja React Native mogą współdzielić kod?
Logikę można współdzielić: typy, klientów API, walidację i hooki, które nie dotykają DOM. Ekranów i komponentów zwykle nie, bo renderują inne prymitywy.
Czy React Native tworzy prawdziwą natywną aplikację?
Tak. Dokumentacja React Native wyjaśnia, że w czasie działania tworzy on odpowiednie widoki Androida i iOS dla swoich komponentów, więc View staje się natywnym widokiem, a nie stroną internetową w opakowaniu.
Co jest wspólne, a co nie
Oba używają pakietu react. Komponenty funkcyjne, JSX, propsy, stan, efekty, context i własne hooki są identyczne, a hook taki jak useState działa na telefonie tak samo jak w przeglądarce.
Różni się renderer. W przeglądarce react-dom zamienia komponenty w elementy HTML. W React Native komponenty takie jak View i Text zamieniane są w widoki platformy, więc wszystko, co zależy od DOM, od document.querySelector po selektory CSS, jest niedostępne.
Zasady tekstu i układu, które zaskakują web developerów
W React Native każdy tekst musi znajdować się wewnątrz komponentu Text; goły tekst pod View powoduje błąd. Dziedziczenie stylów też jest ograniczone: zagnieżdżony Text dziedziczy po nadrzędnym Text, ale View niczego nie przekazuje swoim dzieciom.
Systemem układu jest flexbox, ale flexDirection domyślnie ma wartość column, alignContent flex-start, a flexShrink 0, i flex przyjmuje tylko jedną liczbę. Układy skopiowane z webowego CSS często wymagają dodania flexDirection: "row".
Kiedy wybrać każdy z nich
Wybierz Reacta do wszystkiego, co ludzie otwierają w przeglądarce: stron marketingowych, dashboardów, aplikacji webowych i treści, które muszą znaleźć wyszukiwarki. Wybierz React Native, gdy potrzebujesz aplikacji w sklepach iOS i Android, z dostępem do funkcji urządzenia i natywną nawigacją.
Wiele zespołów używa obu: aplikacji webowej w React i aplikacji React Native, które współdzielą typy i kod API. Jeśli po stronie webowej rozważasz też Next.js, przewodnik Next.js vs React na tej stronie omawia ten wybór.
Jedna karta napisana dla obu
Logika komponentu jest identyczna: te same propsy, to samo wywołanie useState, ta sama obsługa zdarzenia. Zmieniają się tylko elementy i stylowanie.
React dla przeglądarki
Elementy HTML, klasa CSS i onClick. Przeglądarka układa przycisk za tekstem.
React Native dla iOS i Androida
View, Text i Pressable z react-native, style ze StyleSheet.create oraz onPress zamiast onClick.
Listy: map() w przeglądarce, FlatList na telefonie
Ta sama lista w React Native
FlatList renderuje tylko to, co jest blisko ekranu, dzięki czemu długie listy działają płynnie. keyExtractor pełni rolę propsa key.
Kontener z układem flexbox, stylem i obsługą dotyku. Nie przewija się.
Cały tekst musi być wewnątrz Text. Zagnieżdżony Text dziedziczy style; nie ma znaczników nagłówków.
Obrazy z sieci wymagają jawnej szerokości i wysokości. Pliki lokalne używają require().
onChangeText przekazuje bezpośrednio nowy tekst zamiast zdarzenia.
Props multiline pozwala na kilka wierszy tekstu.
Ukrywa wpisywany tekst. Nie działa razem z multiline.
Kontrolowane pole logiczne: aktualizuj value w onValueChange.
Button przyjmuje props title; Pressable opakowuje dowolne dzieci, które chcesz uczynić dotykalnymi.
Pressable oferuje też onPressIn, onPressOut i onLongPress.
Renderuje wszystkie dzieci naraz, więc używaj go do krótkiej treści.
Wydajnie renderuje długie listy. Wymaga data i renderItem; keyExtractor ustawia każdy klucz.
Otwiera URL w zainstalowanej aplikacji, na przykład w przeglądarce. Opakuj go w Pressable, aby uzyskać dotykalny link.
Style to obiekty, zwykle definiowane przez StyleSheet.create. Przekaż tablicę, aby je połączyć; wygrywa ostatni.
Nazwy stylów są w camelCase, jak we własnym propsie style Reacta w przeglądarce.
Każdy View jest kontenerem flex i układa dzieci pionowo, chyba że wskażesz inaczej.
Mapa elementów webowych na React Native
Wyszukaj element, props lub pojęcie z CSS
img, onClick, class...
Wyświetlono {n} z {v} wierszy
Brak wyników. Spróbuj nazwy znacznika, takiej jak div lub input.