Jaka jest różnica między React Native a React?


729

Zacząłem uczyć się React z ciekawości i chciałem poznać różnicę między React a React Native - chociaż nie mogłem znaleźć zadowalającej odpowiedzi za pomocą Google. Wydaje się, że React i React Native mają ten sam format. Czy mają zupełnie inną składnię?


61
Każdy udziela odpowiedzi słownikowej, gdy większość osób zadających to pytanie chce wiedzieć, jak są one wymienne: jak łatwo jest przenieść swój kod React do React Native? Czy będziesz musiał przepisać przód swojej aplikacji internetowej na inny kod React, jeśli chcesz na iPadzie? Jak inaczej
Lawrence Weru,

9
Jakie są główne różnice między ReactJS a React-Native? link tutaj medium.com/@alexmngn/…
core114

14
Krótka odpowiedź jest taka, że ​​native-build tworzy aplikacje mobilne na iOS, Androida i Windows Mobile, które można skompilować i umieścić w sklepach z aplikacjami, aby użytkownicy mogli je zainstalować. Reactjs służy do tworzenia stron internetowych do użytku w przeglądarce internetowej. Oba używają komponentów wielokrotnego użytku, ale składnia używana do renderowania elementów w komponentach (przy użyciu JSX) jest inna. React JSX renderuje html-jak składniki takie jak <h1>, <p>itd Gdzie reagują-natywna aplikacja renderuje rodzimych komponentów widok jak <View>, <Text>, <Image>, <ScrollView>, więc nie można bezpośrednio ponownie użyć kodu komponentów UI chyba przerobienie / wymienić wszystkie elementy.
Ira Herman

Odpowiedzi:


772

ReactJS to biblioteka JavaScript, obsługująca zarówno front-end web, jak i uruchamiana na serwerze, do tworzenia interfejsów użytkownika i aplikacji internetowych.

React Native to platforma mobilna, która kompiluje się z komponentami aplikacji rodzimej, umożliwiając tworzenie natywnych aplikacji mobilnych na różne platformy (iOS, Android i Windows Mobile) w JavaScript, która pozwala używać ReactJS do budowania komponentów i implementuje ReactJS w ramach kaptur.

Oba są zgodne z rozszerzeniem składni JSX do JavaScript.

Oba są otwarte przez Facebook.


3
@LemuelAdane Oto komentarz z Facebooka na temat tego, jak to się robi: facebook.github.io/react/docs/environments.html . Oto fajne wprowadzenie, które omawia
Nader

61
Tak więc, jeśli zbuduję aplikację w native zareagować, czy którekolwiek / wszystkie z nich mogą być ponownie wykorzystane w ReagJS lub odwrotnie?
Troy Cosentino

12
@MelAdane Plakat prawdopodobnie odnosi się do korzystania z bibliotek ReactJS w NodeJS w celu tworzenia gotowych plików (za pomocą czegoś takiego jak Webpack), które mogą być następnie dostarczane klientowi jako pliki statyczne.
Pineda

9
Jeśli zbuduję aplikację internetową za pomocą Reaguj, czy ten sam kod HTML / JS może być używany w aplikacji mobilnej przy użyciu Reakcja natywna?
Ravi Maniyar

14
@RaviManiyar NIE, możesz ponownie użyć logiki biznesowej, ale nie możesz ponownie użyć kodów interfejsu użytkownika. React Native używa natywnych komponentów interfejsu użytkownika, podczas gdy React.JS jest przeznaczony do sieci, a interfejs użytkownika jest budowany przy użyciu komponentów HTML i css
Chromonav

291

Oto projekt React .

Na Facebooku wymyślili React, aby JavaScript mógł szybciej manipulować DOM DOM przy użyciu wirtualnego modelu DOM.

Pełne odświeżanie DOM jest wolniejsze w porównaniu do modelu React virtual-dom , który odświeża tylko części strony (czytaj: częściowe odświeżanie).

Jak możesz zrozumieć z tego filmu , Facebook nie wynalazł React, ponieważ od razu zrozumieli, że częściowe odświeżenie będzie szybsze niż konwencjonalne. Początkowo potrzebowali sposobu na skrócenie czasu ponownej kompilacji aplikacji Facebooka i na szczęście ożywiło to częściowe odświeżanie DOM.

React native to tylko konsekwencja React. Jest to platforma do tworzenia aplikacji natywnych przy użyciu JavaScript.

Przed natywnym Reactem trzeba było znać Javę na Androida lub Objective-C na iPhone'a i iPada, aby tworzyć natywne aplikacje.

Dzięki React Native można naśladować zachowanie natywnej aplikacji w JavaScript, a na końcu otrzymasz kod specyficzny dla platformy jako wynik. Możesz nawet mieszać natywny kod z JavaScriptem, jeśli chcesz dalej optymalizować swoją aplikację.

Jak powiedziała Olivia Bishop w filmie , 85% podstawowej bazy kodu React może być współużytkowane przez platformy. Byłyby to komponenty zwykle używane przez aplikacje i wspólna logika.

15% kodu jest specyficzne dla platformy. JavaScript specyficzny dla platformy jest tym, co nadaje platformie smak (i ​​robi różnicę w doświadczeniu).

Fajne jest to, że ten kod jest specyficzny dla platformy - jest już napisany, więc wystarczy go użyć.


9
Osobiście bardziej podoba mi się ta odpowiedź, ponieważ jest bardziej szczegółowa i zawiera linki do dalszych wyjaśnień.
Cristi Potlog,

7
Podoba mi się również ta odpowiedź. „Przed React Native…” Nie zapomnij też o Xamarinie. ;)
Asp Upload

117

Reagować:

React to deklaratywna, wydajna i elastyczna biblioteka JavaScript do tworzenia interfejsów użytkownika.

React Native:

React Native pozwala tworzyć aplikacje mobilne przy użyciu tylko JavaScript. Korzysta z tego samego projektu co React, pozwalając ci skomponować bogaty interfejs użytkownika z deklaratywnych komponentów.
Dzięki React Native nie budujesz „mobilnej aplikacji internetowej”, „aplikacji HTML5” ani „aplikacji hybrydowej”. Budujesz prawdziwą aplikację mobilną, która jest nie do odróżnienia od aplikacji zbudowanej przy użyciu Objective-C lub Java. React Native używa tych samych podstawowych elementów składowych interfejsu użytkownika, co zwykłe aplikacje na iOS i Androida. Po prostu połącz te bloki konstrukcyjne za pomocą JavaScript i React.
React Native pozwala szybciej budować aplikację. Zamiast ponownej kompilacji możesz natychmiast ponownie załadować aplikację. Dzięki funkcji przeładowywania na gorąco możesz nawet uruchomić nowy kod, zachowując stan aplikacji. Spróbuj - to magiczne doświadczenie.
React Native łączy się płynnie ze składnikami napisanymi w Objective-C, Java lub Swift. Łatwo jest przejść do natywnego kodu, jeśli chcesz zoptymalizować kilka aspektów swojej aplikacji. Łatwo jest również zbudować część aplikacji w React Native, a część aplikacji bezpośrednio przy użyciu kodu natywnego - tak działa aplikacja Facebook.

Więc w zasadzie React jest biblioteką interfejsu użytkownika do wyświetlania twojej aplikacji internetowej, używając javascript i JSX , React native to dodatkowa biblioteka na górze React, aby stworzyć natywną aplikację iOSi Androidurządzenia.

Przykładowy kod React :

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);


React Przykładowy kod źródłowy:

import React, { Component } from 'react';
import { Text, View } from 'react-native';

class WhyReactNativeIsSoGreat extends Component {
  render() {
    return (
      <View>
        <Text>
          If you like React on the web, you'll like React Native.
        </Text>
        <Text>
          You just use native components like 'View' and 'Text',
          instead of web components like 'div' and 'span'.
        </Text>
      </View>
    );
  }
}

Aby uzyskać więcej informacji o React , odwiedź ich oficjalną stronę internetową utworzoną przez zespół Facebooka:

https://facebook.github.io/react

Aby uzyskać więcej informacji o React Native , odwiedź stronę React Native poniżej:

https://facebook.github.io/react-native


40
Przykłady kodu są przydatne, ale O wiele lepiej byłoby zobaczyć komponent SAME zaimplementowany w każdym frameworku
najlepiej

8
Twoja odpowiedź powinna być zaakceptowana. Przyszedłem tutaj, aby sprawdzić, czy React i React Native mają tę samą architekturę i czy kod wygląda tak samo, nie w przypadku definicji obu bibliotek.
Gherbi Hicham

1
Chciałbym dodać, że gdybyś poszedł na surową wersję natywną, miałbyś dosłownie tylko dwa wiersze kodu, z których jeden jest konfigurowany automatycznie dla gniazdka (w zależności). Tak, potrzebujesz formatyzatora daty, ale nadal tylko jeden wiersz. Z trudem czytam „To dlatego reakcja jest niesamowita”, kiedy dosłownie zawiera 20 razy więcej wierszy kodu niż rzeczywiste aplikacje natywne. Mimo to doceniam twoją odpowiedź, a nawet cieszę się z React w Internecie za rozwiązania, które oferuje w dziedzinie, w której jest świetny. Chciałbym tylko, żeby więcej ludzi wiedziało, jak wdrożyć jego wzorce bez niego, aby porównać, kiedy jest to przydatne, a koszmary związane z konserwacją
Stephen J

58

ReactJS to platforma do budowania hierarchii komponentów interfejsu użytkownika. Każdy element ma stan i rekwizyty. Przepływy danych od komponentów najwyższego do niskiego poziomu za pomocą rekwizytów. Stan jest aktualizowany w komponencie najwyższego poziomu za pomocą procedur obsługi zdarzeń.

React native korzysta z React Framework do budowania komponentów do aplikacji mobilnych. React native zapewnia podstawowy zestaw komponentów dla platform iOS i Android. Niektóre składniki React Native to Navigator, TabBar, Text, TextInput, View, ScrollView. Te komponenty używają natywnie wewnętrznych komponentów iOS UIKit i Android UI. React native pozwala także na NativeModules, w których kod napisany w ObjectiveC na iOS i Java na Androida może być używany w JavaScript.


41

Po pierwsze, podobieństwa: zarówno React & React Native (RN) zostały zaprojektowane w celu tworzenia elastycznych interfejsów użytkownika. Te frameworki mają mnóstwo zalet, ale najbardziej podstawową zaletą jest to, że zostały stworzone z myślą o rozwoju interfejsu użytkownika. Facebook opracował RN kilka lat po React.

Reakcja: Facebook zaprojektował ten framework tak, aby był prawie jak pisanie kodu JavaScript wewnątrz HTML / XML, dlatego tagi są nazywane „ JSX ” (JavaScript XML) i są podobne do znanych tagów podobnych do HTML, takich jak <div>lub <p>. Cechą charakterystyczną React są duże litery, które oznaczają niestandardowy komponent, taki jak <MyFancyNavbar />, który również istnieje w RN. Jednak React używa DOM . DOM istnieje dla HTML, dlatego React służy do tworzenia stron internetowych.

React Native: RN nie używa HTML i dlatego nie jest używany do tworzenia stron internetowych. Służy do ... praktycznie wszystkiego innego! Programowanie mobilne (zarówno iOS, jak i Android), urządzenia inteligentne (np. Zegarki, telewizory), rzeczywistość rozszerzona itp. Ponieważ RN nie ma DOM do interakcji, zamiast używać tego samego rodzaju znaczników HTML używanych w React, używa własnego tagi, które są następnie kompilowane na inne języki. Na przykład, zamiast <div>znaczników, programiści RN używają wbudowanego <View>znacznika RN , który kompiluje się w inny natywny kod pod maską (np. android.viewNa Androida; i UIViewna iOS).

Krótko mówiąc: są bardzo podobne (do tworzenia interfejsu użytkownika), ale są używane do różnych mediów.


Dobra odpowiedź. Czy możesz opracować nieco więcej i dodać do tego więcej punktów. Byłoby miło dla ludzi, którzy czytają.
sarath

1
umieść tę odpowiedź na górze
JerryGoyal

38
  1. React-Native to platforma do tworzenia aplikacji na Androida i iOS, która dzieli 80% - 90% kodu JavaScript.

Podczas gdy React.js jest nadrzędną biblioteką JavaScript do tworzenia aplikacji internetowych.

  1. Podczas gdy używasz znaczników typu <View>, <Text>bardzo często w React-Native, React.js używa internetowych znaczników HTML takich jak <div> <h1> <h2>, które są jedynie synonimami w słowniku rozwoju stron internetowych / urządzeń mobilnych.

  2. W przypadku React.js potrzebujesz DOM do renderowania ścieżki znaczników HTML, natomiast w przypadku aplikacji mobilnej: React-Native używa AppRegistry do zarejestrowania aplikacji.

Mam nadzieję, że jest to łatwe wytłumaczenie szybkich różnic / podobieństw w React.js i React-Native.


25

Nie możemy ich dokładnie porównać. Istnieją różnice w przypadku użycia .

(Aktualizacja 2018)


ReactJS

React koncentruje się przede wszystkim na tworzeniu stron internetowych.

    • Wirtualny DOM programu React jest szybszy niż konwencjonalny model pełnego odświeżania , ponieważ wirtualny DOM odświeża tylko części strony.
    • Możesz ponownie użyć komponentów kodu w React, oszczędzając dużo czasu. (Możesz także w React Native.)
    • Jako firma: Całkowite renderowanie stron, od serwera do przeglądarki, poprawi SEO Twojej aplikacji internetowej .
    • To poprawia debugowania szybkość podejmowania życie programistę łatwiej.
    • Możesz używać hybrydowego tworzenia aplikacji mobilnych, takich jak Cordova lub Ionic, do tworzenia aplikacji mobilnych za pomocą React, ale bardziej efektywnie buduje aplikacje mobilne za pomocą React Native z wielu punktów.

React Native

Rozszerzenie React , niszowe w rozwoju aplikacji mobilnych.

    • Jego głównym celem jest mobilny interfejs użytkownika .
    • Obejmuje iOS i Android .
    • Wielokrotnego użytku React Natywne komponenty i moduły interfejsu użytkownika umożliwiają natywne renderowanie aplikacji hybrydowych.
    • Nie musisz remontować starej aplikacji. Wszystko, co musisz zrobić, to dodać komponenty React Native UI do kodu istniejącej aplikacji , bez konieczności przepisywania.
    • Nie używa HTML do renderowania aplikacji . Zapewnia alternatywne komponenty, które działają w podobny sposób, więc nie byłoby trudno je zrozumieć.
    • Ponieważ twój kod nie jest renderowany na stronie HTML, oznacza to również, że nie będziesz mógł ponownie użyć bibliotek, które wcześniej używałeś z React, które renderują dowolny rodzaj HTML, SVG lub Canvas.
    • React Native nie jest wykonany z elementów internetowych i nie można go stylować w ten sam sposób. Do widzenia Animacje CSS!

Mam nadzieję, że ci pomogłem :)


17

W prostym sensie React i React native działają według tych samych zasad projektowania, z wyjątkiem projektowania interfejsu użytkownika.

  1. React native ma osobny zestaw tagów do definiowania interfejsu użytkownika dla urządzeń mobilnych, ale oba używają JSX do definiowania komponentów.
  2. Głównym celem obu systemów jest opracowanie elementów interfejsu użytkownika wielokrotnego użytku i zmniejszenie nakładów pracy związanych z opracowywaniem.
  3. Jeśli odpowiednio planujesz i konstruujesz kod, możesz użyć tej samej logiki biznesowej dla urządzeń mobilnych i sieci

W każdym razie jest to doskonała biblioteka do tworzenia interfejsu użytkownika dla urządzeń mobilnych i sieci.


16

React to deklaratywna, wydajna i elastyczna biblioteka JavaScript do budowania interfejsów użytkownika. Twoje komponenty mówią React, co chcesz renderować - wtedy React skutecznie zaktualizuje i wyrenderuje odpowiednie komponenty, gdy zmienią się twoje dane. Tutaj ShoppingList jest klasą komponentu React lub typem komponentu React.

Aplikacja React Native to prawdziwa aplikacja mobilna. Dzięki React Native nie budujesz „mobilnej aplikacji internetowej”, „aplikacji HTML5” ani „aplikacji hybrydowej”. Budujesz prawdziwą aplikację mobilną, która jest nie do odróżnienia od aplikacji zbudowanej przy użyciu Objective-C lub Java. React Native używa tych samych podstawowych elementów składowych interfejsu użytkownika, co zwykłe aplikacje na iOS i Androida.

Więcej informacji


13

ReactJS jest podstawową strukturą, mającą na celu budowę komponentu izolowanego na podstawie wzorca reaktywnego, możesz myśleć o nim jako o V z MVC, chociaż chciałbym powiedzieć, że reakcja ma inny charakter, szczególnie jeśli nie znasz koncepcji reaktywnej .

ReactNative to kolejna warstwa, która ma mieć wspólny zestaw dla platform Android i iOS. Zatem kod wygląda zasadniczo tak samo jak ReactJS, ponieważ jest ReactJS, ale ładuje się natywnie na platformach mobilnych. Możesz także łączyć bardziej złożone i zależne od platformy API za pomocą Java / Objective-C / Swift w zależności od systemu operacyjnego i używać go w React.


13

React Native jest przede wszystkim opracowany w JavaScript, co oznacza, że ​​większość kodu, który potrzebujesz na początek, można udostępnić na różnych platformach. React Native będzie renderowane przy użyciu komponentów rodzimych. React Natywne aplikacje są tworzone w języku wymaganym przez docelową platformę, Objective-C lub Swift dla iOS, Java dla Androida itp. Zapisany kod nie jest współużytkowany na różnych platformach, a ich zachowanie jest różne. Mają bezpośredni dostęp do wszystkich funkcji oferowanych przez platformę bez żadnych ograniczeń.

React to biblioteka JavaScript typu open source opracowana przez Facebooka w celu tworzenia interfejsów użytkownika. Służy do obsługi warstwy widoku dla aplikacji internetowych i mobilnych. ReactJS służy do tworzenia komponentów interfejsu użytkownika wielokrotnego użytku. Jest to obecnie jedna z najpopularniejszych bibliotek JavaScript w tej dziedzinie i ma solidne podstawy i dużą społeczność. Jeśli uczysz się ReactJS, musisz mieć wiedzę o JavaScript, HTML5 i CSS.


12

React jest podstawową abstrakcją React Native i React DOM , więc jeśli zamierzasz pracować z React Native, będziesz także potrzebował React ... tak samo z Internetem, ale zamiast React Native będziesz potrzebować React DOM.

Ponieważ React jest abstrakcyjną bazą, ogólna składnia i przepływ pracy są takie same, ale komponenty, których użyjesz, są bardzo różne, więc musisz nauczyć się tych różnic, jest to zgodne z tak zwanym React, tak zwanym moto, które brzmi „Naucz się pisać gdziekolwiek”, ponieważ jeśli znasz React (abstrakcja podstawowa), możesz po prostu nauczyć się różnic między platformami bez uczenia się innego języka programowania, składni i przepływu pracy.


11

React-Native to framework, w którym ReactJS jest biblioteką javascript, której możesz używać na swojej stronie.

React-native zapewnia domyślne podstawowe komponenty (obrazy, tekst), gdzie React zapewnia kilka komponentów i umożliwia ich współpracę.



9

W odniesieniu do cyklu życia komponentów oraz wszystkich innych dzwonków i gwizdków jest to w większości takie samo.

Różnica polega głównie na stosowaniu znaczników JSX. React używa takiego, który przypomina HTML. Drugi to znacznik używany przez React-Native do wyświetlania widoku.


8

React Native jest przeznaczony do aplikacji mobilnych, natomiast React jest przeznaczony do stron internetowych (front-end). Oba są frameworkami wymyślonymi przez Facebooka. React Native to wieloplatformowa platforma programistyczna, co oznacza, że ​​można napisać prawie ten sam kod dla IOS i Androida i będzie działać. Osobiście wiem znacznie więcej o React Native, więc zostawię to przy tym.


8

React Js manipuluje przy pomocy HTML Dom. Ale React native manipuluje natywnym komponentem interfejsu użytkownika na urządzenia mobilne (iOS / Android).


7

ReactJS to biblioteka javascript, która służy do budowania interfejsów sieciowych. Potrzebny byłby program pakujący, taki jak webpack, i próbowałby zainstalować moduły potrzebne do zbudowania witryny.

React Native to framework javascript i zawiera wszystko, czego potrzebujesz do pisania aplikacji wieloplatformowych (takich jak iOS lub Android). Aby zbudować i wdrożyć aplikację, musisz zainstalować oprogramowanie Xcode i Android Studio.

W przeciwieństwie do ReactJS, React-Native nie używa HTML, ale podobne komponenty, których można używać na iOS i Androidzie do tworzenia aplikacji. Te komponenty używają prawdziwych komponentów natywnych do tworzenia aplikacji na iOS i Androida. Z tego powodu aplikacje React-Native działają w odróżnieniu od innych platform programistycznych Hybrid. Komponenty zwiększają także możliwość ponownego użycia kodu, ponieważ nie trzeba ponownie tworzyć tego samego interfejsu użytkownika na iOS i Androidzie.


6

W prostych słowach ReactJS jest biblioteką nadrzędną, która zwraca coś do renderowania według środowiska hosta (przeglądarka, urządzenie mobilne, serwer, komputer stacjonarny itp.). Oprócz renderowania udostępnia również inne metody, takie jak haki cyklu życia .. itp.

W przeglądarce używa innej biblioteki reagującej do renderowania elementów DOM. W urządzeniach mobilnych wykorzystuje komponenty React-Native do renderowania natywnych komponentów interfejsu użytkownika specyficznych dla platformy (zarówno IOS, jak i Android). WIĘC,

Reagować + Reagować dom = rozwój sieci

reagować + reagować-natywny = rozwój mobilny


4

REACT to biblioteka JavaScript do tworzenia aplikacji internetowych o dużym / małym interfejsie, takich jak Facebook.

REACT NATIVE to framework JavaScript do tworzenia natywnej aplikacji mobilnej na Androida, IOS i Windows Phone.

Oba są otwarte przez Facebook.


3

Oto różnice, o których wiem:

  1. Mają różne tagi HTML: React Native używa do obsługi tekstu i zamiast w React.
  2. React Native używa komponentów Touchable zamiast zwykłego elementu przycisku.
  3. React Native ma komponenty ScrollView i FlatList do renderowania list.
  4. React Native używa AsyncStorage, a React korzysta z pamięci lokalnej.
  5. W React Native routery działają jako stos, natomiast w React używamy komponentów Route do nawigacji po mapach.

3

Podsumowując: React.js dla Web Development, a React-Native dla rozwoju aplikacji mobilnych


3

React vs React Native

ReactJS

  • React służy do tworzenia stron internetowych, aplikacji internetowych, SPA itp.
  • React to biblioteka JavaScript używana do tworzenia hierarchii interfejsu użytkownika.
  • Odpowiada za renderowanie elementów interfejsu użytkownika, jest uważany za część V frameworka MVC.
  • Wirtualny DOM React jest szybszy niż tradycyjny model pełnego odświeżania, ponieważ wirtualny DOM odświeża tylko części strony, skracając w ten sposób czas odświeżania strony.
  • React wykorzystuje komponenty jako podstawową jednostkę interfejsu użytkownika, które można ponownie wykorzystać, co oszczędza czas kodowania. Prosty i łatwy do nauczenia.

React Native

  • React Native to platforma używana do tworzenia wieloplatformowych aplikacji natywnych. Oznacza to, że możesz tworzyć aplikacje natywne, a ta sama aplikacja będzie działać na Androidzie i iOS.
  • React native ma wszystkie zalety ReactJS
  • React native umożliwia programistom tworzenie aplikacji natywnych w stylu WWW.
  • Deweloper może łatwo zostać programistą mobilnym.

2

React Js - React JS to front-end biblioteka javascript, to duża biblioteka, a nie framework

  • Podąża za podejściem opartym na komponentach, które pomaga w budowaniu
    komponentów interfejsu użytkownika wielokrotnego użytku
    • Służy do opracowywania złożonego i interaktywnego interfejsu internetowego i mobilnego
    • Mimo że został otwarty w 2015 r., Ma jedną z największych społeczności, które go wspierają.

ReactNative - React Native to platforma aplikacji mobilnych typu open source.


2

Trochę późno na imprezę, ale oto bardziej wyczerpująca odpowiedź z przykładami:

Reagować

React to oparta na komponentach biblioteka interfejsu użytkownika, która wykorzystuje „cieńowy DOM” do wydajnej aktualizacji DOM o zmiany, zamiast przebudowywania całego drzewa DOM dla każdej zmiany. Początkowo został zbudowany dla aplikacji internetowych, ale teraz można go również używać na urządzeniach mobilnych i 3D / vr.

Komponentów między React i React Native nie można zamieniać, ponieważ React Native odwzorowuje na natywne elementy mobilnego interfejsu użytkownika, ale logiki biznesowej i kodu niezwiązanego z renderowaniem można ponownie użyć.

ReactDOM

Początkowo był dołączony do biblioteki React, ale został podzielony, gdy React był używany na innych platformach niż tylko w Internecie. Służy jako punkt wejścia do DOM i jest używany w połączeniu z React.

Przykład:

import React from 'react';
import ReactDOM from 'react-dom';

class App extends Component {
    state = {
        data: [],
    }

    componentDidMount() {
        const data = API.getData(); // fetch some data
        this.setState({ data })
    }

    clearData = () => {
        this.setState({
            data: [],
        });
    }

    render() {
        return (
            <div>
                {this.state.data.map((data) => (
                    <p key={data.id}>{data.label}</p>
                ))}
                <button onClick={this.clearData}>
                    Clear list
                </button>
            </div>
        );
    }

}

ReactDOM.render(App, document.getElementById('app'));

React Native

React Native to wieloplatformowa platforma mobilna, która wykorzystuje React i komunikuje się między Javascriptem a jego rodzimym odpowiednikiem poprzez „most”. Z tego powodu wiele struktur interfejsu użytkownika musi się różnić podczas korzystania z React Native. Na przykład: podczas budowania listy napotkasz poważne problemy z wydajnością, jeśli spróbujesz użyć mapdo zbudowania listy zamiast React NativeFlatList . React Native może być wykorzystywany do tworzenia aplikacji mobilnych na iOS / Android, a także do inteligentnych zegarków i telewizorów.

Expo

Expo jest punktem wyjścia przy uruchamianiu nowej aplikacji React Native.

Expo to platforma i platforma dla uniwersalnych aplikacji React. Jest to zestaw narzędzi i usług opartych na platformach React Native i macierzystych, które pomagają opracowywać, budować, wdrażać i szybko iterować w aplikacjach na iOS, Android i aplikacje internetowe

Uwaga: Korzystając z Expo, możesz używać tylko natywnych API, które zapewniają. Wszystkie dodatkowe biblioteki, które dołączasz, będą musiały być czystym językiem JavaScript lub będziesz musiał wysunąć expo.

Ten sam przykład z wykorzystaniem React Native:

import React, { Component } from 'react';
import { Flatlist, View, Text, StyleSheet } from 'react-native';

export default class App extends Component {
    state = {
        data: [],
    }

    componentDidMount() {
        const data = API.getData(); // fetch some data
        this.setState({ data })
    }

    clearData = () => {
        this.setState({
            data: [],
        });
    }

    render() {
        return (
            <View style={styles.container}>
                <FlatList
                    data={this.state.data}
                    renderItem={({ item }) => <Text key={item.id}>{item.label}</Text>}
                />
                <Button title="Clear list" onPress={this.clearData}></Button>
            </View>
        );
    }

}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
});

Różnice:

  • Zauważ, że wszystko poza renderowaniem może pozostać takie samo, dlatego kod logiki biznesowej / cyklu życia może być ponownie użyty w React i React Native
  • W React Native wszystkie komponenty muszą zostać zaimportowane z Reaktywnej lub innej biblioteki interfejsu użytkownika
  • Używanie niektórych interfejsów API, które odwzorowują na komponenty natywne, zwykle będzie bardziej wydajne niż próba obsłużenia wszystkiego po stronie javascript. dawny. odwzorowywanie komponentów w celu zbudowania listy w porównaniu z użyciem płaskiej listy
  • Subtelne różnice: rzeczy takie jak onClickzamień sięonPress , React Native używa arkuszy stylów do definiowania stylów w bardziej wydajny sposób, a React Native używa Flexbox jako domyślnej struktury układu, aby utrzymać reakcję.
  • Ponieważ w React Native nie ma tradycyjnego „DOM”, w bibliotekach React i React Native można używać tylko czystych bibliotek javascript

React360

Warto również wspomnieć, że React może być również wykorzystywany do tworzenia aplikacji 3D / VR. Struktura komponentu jest bardzo podobna do React Native. https://facebook.github.io/react-360/


1

Reaguj używa domena reagująca nie domena przeglądarki, podczas gdy Reakcja natywna korzysta z wirtualnej domeny, ale obie używają tej samej składni, tzn. jeśli możesz użyć Reagjs, możesz użyć Reakcja natywna, ponieważ większość bibliotek używanych w Reactjs jest dostępna w Reakt Natywny podobnie jak nawigacja i inne wspólne biblioteki, które mają ze sobą wspólne.


Krótka odpowiedź jest taka, że ​​native-build tworzy aplikacje mobilne na iOS, Androida i Windows Mobile, które można skompilować i umieścić w sklepach z aplikacjami, aby użytkownicy mogli je zainstalować. Reactjs służy do tworzenia stron internetowych do użytku w przeglądarce internetowej. Oba używają komponentów wielokrotnego użytku, ale składnia używana do renderowania elementów w komponentach (przy użyciu JSX) jest inna. React JSX renderuje komponenty podobne do html, takie jak <h1>, <p>itp. Tam, gdzie React -native renderuje natywne komponenty widoku aplikacji, takie jak <View>i <Text>.
Ira Herman

1

W odpowiedzi na komentarz z @poshest powyżej, oto React Native wersja kodu Clock opublikowanego wcześniej w React (przepraszam, nie mogłem skomentować tej sekcji bezpośrednio, w przeciwnym razie dodałbym tam kod):

React Przykładowy kod źródłowy

import { AppRegistry } from 'react-native';
import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';

class Clock extends Component {
  constructor(props) {
    super(props);
    this.state = { date: new Date() };
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.sectionTitle}>Hello, world!</Text>
        <Text style={styles.sectionDescription}>It is {this.state.date.toLocaleTimeString()}.</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'white',
    flex: 1,
    justifyContent: 'center',
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
    color: 'black',
    alignSelf: 'center',
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
    color: 'darkgrey',
    alignSelf: 'center',
  },
});

AppRegistry.registerComponent("clock", () => Clock);

Zauważ, że styl jest całkowicie moim wyborem i nie ma na celu bezpośredniej replikacji tagów <h1>i <h2>używanych w kodzie React.


1

Niektóre różnice są następujące:
1- React-Native to środowisko, które służyło do tworzenia aplikacji mobilnych, gdzie ReactJS to biblioteka javascript, której można używać na swojej stronie internetowej.
2- React-Native nie używa HTML do renderowania aplikacji, podczas gdy React używa.
3- React-Native używany do opracowywania tylko aplikacji mobilnej, podczas gdy React korzysta z witryny i telefonu komórkowego.


0

React Native

  • Jest to framework do budowania aplikacji natywnych przy użyciu JavaScript.

  • Kompiluje się z natywnymi komponentami aplikacji, co umożliwia tworzenie natywnych aplikacji mobilnych.

  • Nie musisz remontować starej aplikacji. Wszystko, co musisz zrobić, to dodać komponenty React Native UI do kodu istniejącej aplikacji, bez konieczności przepisywania.

Reaguj js

  • Obsługuje zarówno front-end web, jak i działa na serwerze, do tworzenia interfejsów użytkownika i aplikacji internetowych.

  • Pozwala nam również tworzyć komponenty interfejsu użytkownika wielokrotnego użytku.

  • Możesz ponownie wykorzystać komponenty kodu w React JS, oszczędzając dużo czasu.


0

React.js często nazywany React lub ReactJS to biblioteka JavaScript odpowiedzialna za budowanie hierarchii komponentów interfejsu użytkownika lub innymi słowy odpowiedzialna za renderowanie komponentów interfejsu użytkownika. Zapewnia obsługę zarówno interfejsu użytkownika, jak i serwera.

React Native to platforma do budowania aplikacji natywnych przy użyciu JavaScript. React Native kompiluje się na natywne komponenty aplikacji, co umożliwia tworzenie natywnych aplikacji mobilnych. W React JS React jest podstawową abstrakcją React DOM dla platformy internetowej, podczas gdy w React Native React jest nadal podstawową abstrakcją, ale React Native. Tak więc składnia i przepływ pracy pozostają podobne, ale komponenty są różne.

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.