В чем разница между React Native и React?

731

Я начал изучать React из любопытства и хотел узнать разницу между React и React Native - хотя не смог найти удовлетворительного ответа с помощью Google. React и React Native, похоже, имеют одинаковый формат. У них совершенно другой синтаксис?

Шива Кумар
источник
61
Все дают словарный ответ, когда большинство людей, задающих этот вопрос, просто хотят знать, насколько они взаимозаменяемы: насколько легко перенести свой код React на React Native? Вам нужно будет переписать интерфейс вашего веб-приложения в другой код React, если вы хотите использовать его на iPad? Как отличается?
Лоуренс Веру
9
Каковы основные различия между ReactJS и React-Native? ссылка здесь medium.com/@alexmngn/...
core114
14
Короткий ответ заключается в том, что реагирующая система создает мобильные приложения для iOS, Android и Windows Mobile, которые можно скомпилировать и поместить в магазины приложений для установки пользователями. Reactjs предназначен для создания веб-страниц для использования в веб-браузере. Оба используют повторно используемые компоненты, но синтаксис, который вы используете для визуализации элементов в компонентах (используя JSX), различен. Реагировать JSX делает HTML-подобные компоненты , как <h1>, <p>и т.д. Где реагирующих родной делает собственные компоненты вид приложения , как <View>, <Text>, <Image>, <ScrollView>, так что вы не можете непосредственно повторно использовать ваш UI код компонента , если вы не переделывают / заменить все элементы.
Ира Герман

Ответы:

774

ReactJS - это библиотека JavaScript, поддерживающая как интерфейсную сеть, так и работающую на сервере, для создания пользовательских интерфейсов и веб-приложений.

React Native - это мобильная инфраструктура, которая компилируется с нативными компонентами приложений, позволяя создавать собственные мобильные приложения для различных платформ (iOS, Android и Windows Mobile) на JavaScript, что позволяет использовать ReactJS для создания компонентов и реализует ReactJS под капот.

Оба следуют расширению синтаксиса JSX для JavaScript.

Оба с открытым исходным кодом на Facebook.

Надер Дабит
источник
3
@LemuelAdane Вот сообщение от Facebook о том, как это делается: facebook.github.io/react/docs/environments.html . Вот хорошее введение, которое объясняет,
Nader Dabit
61
Итак, если я создаю приложение в реагировать на нативном языке, можно ли его / все повторно использовать в реагировать на JJ или наоборот?
Трой Косентино,
12
@MelAdane Автор, скорее всего, ссылается на использование библиотек ReactJS на NodeJS для создания готовых файлов (используя что-то вроде Webpack), которые затем могут быть переданы клиенту в виде статических файлов.
Пинеда
9
Если я создаю веб-приложение с использованием реагирования, может ли тот же код HTML / JS быть использован в мобильном приложении с использованием собственного реагирования?
Рави Манияр
14
@RaviManiyar НЕТ, вы можете повторно использовать свою бизнес-логику, но вы не можете повторно использовать свои коды пользовательского интерфейса. React Native использует нативные компоненты пользовательского интерфейса, в то время как React.JS использует его для веб-сайтов, а пользовательский интерфейс построен с использованием html-компонентов и css
Chromonav
292

Вот проект React .

В Facebook они изобрели React, чтобы JavaScript мог быстрее управлять DOM веб-сайта с помощью виртуальной модели DOM.

Полное обновление DOM медленнее по сравнению с моделью React virtual-dom , которая обновляет только части страницы (читай: частичное обновление).

Как вы можете понять из этого видео , Facebook не изобрел React, потому что они сразу поняли, что частичное обновление будет быстрее, чем обычное обновление. Первоначально им нужен был способ сократить время перестройки приложений Facebook, и, к счастью, это привело к частичному обновлению DOM.

Реагировать родной - это всего лишь следствие React. Это платформа для создания собственных приложений с использованием JavaScript.

До React родной вам нужно было знать Java для Android или Objective-C для iPhone и iPad, чтобы создавать собственные приложения.

С React Native можно имитировать поведение нативного приложения в JavaScript, и в конце вы получите специфический для платформы код в качестве вывода. Вы можете даже смешать нативный код с JavaScript, если вам нужно еще больше оптимизировать свое приложение.

Как сказала Оливия Бишоп в видео , 85% базы собственного кода React может быть разделено между платформами. Это будут компоненты, которые приложения обычно используют, и общая логика.

15% кода зависит от платформы. Специфичный для платформы JavaScript - это то, что дает платформу вкус (и имеет значение в опыте).

Крутая вещь - это специфичный для платформы код - он уже написан, так что вам просто нужно его использовать.

прости
источник
9
Мне лично этот ответ больше нравится, так как он более подробный и предлагает ссылки на дальнейшие объяснения.
Кристи Потлог
7
Мне тоже нравится этот ответ. «До React Native ...» Не забывайте, что есть и Xamarin. ;)
Asp Upload
117

React:

React - это декларативная, эффективная и гибкая библиотека JavaScript для создания пользовательских интерфейсов.

React Native:

React Native позволяет создавать мобильные приложения, используя только JavaScript. Он использует тот же дизайн, что и React, позволяя создавать богатый мобильный интерфейс из декларативных компонентов. React Native плавно сочетается с компонентами, написанными на Objective-C, Java или Swift. Просто перейти к нативному коду, если вам нужно оптимизировать несколько аспектов вашего приложения. Также легко создать часть вашего приложения в React Native, а часть приложения - напрямую с использованием нативного кода - так работает приложение Facebook.
С React Native вы не создаете «мобильное веб-приложение», «приложение HTML5» или «гибридное приложение». Вы создаете настоящее мобильное приложение, которое неотличимо от приложения, созданного с использованием Objective-C или Java. React Native использует те же основные строительные блоки пользовательского интерфейса, что и обычные приложения для iOS и Android. Вы просто соединяете эти строительные блоки, используя JavaScript и React.
React Native позволяет быстрее создавать приложение. Вместо перекомпиляции вы можете мгновенно перезагрузить приложение. С помощью горячей перезагрузки вы даже можете запускать новый код, сохраняя состояние вашего приложения. Попробуйте - это волшебный опыт.

Таким образом, в основном React - это библиотека пользовательского интерфейса для просмотра вашего веб-приложения, использующая javascript и JSX , React native - это дополнительная библиотека поверх React для создания нативного приложения iOSи Androidустройств.

Реагировать пример кода:

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')
);


Реагируйте на пример собственного кода:

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>
    );
  }
}

Для получения дополнительной информации о React посетите их официальный сайт, созданный командой Facebook:

https://facebook.github.io/react

Для получения дополнительной информации о React Native посетите веб-сайт React native ниже:

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

Алиреза
источник
40
Ваши примеры кода полезны, но было бы НАСТОЛЬКО гораздо лучше увидеть один и тот же компонент, реализованный в каждом фреймворке
самое лучшее
8
Ваш ответ должен быть принят, я пришел сюда, чтобы посмотреть, имеют ли React и React Native одинаковую архитектуру и выглядит ли код одинаково, не для определений обеих библиотек.
Герби Хичем
1
Я хотел бы добавить, что если бы вы работали без изменений, у вас было бы буквально две строки кода, одна из которых настраивалась автоматически для розетки (в зависимости). Да, вам понадобится форматировщик даты, но все равно всего одна строка. Мне трудно читать «Вот почему реакция - это круто», когда в ней буквально в 20 раз больше строк кода, чем в реальных нативных приложениях. Тем не менее, я ценю ваш ответ и даже наслаждаюсь React в сети для решений, которые он предоставляет в области, в которой он великолепен. Я просто хотел бы, чтобы больше людей знали, как реализовать его шаблоны без него, чтобы сравнить, когда это полезно, с ночными кошмарами на обслуживание
Стивен Дж
58

ReactJS - это структура для построения иерархии компонентов пользовательского интерфейса. Каждый компонент имеет состояние и реквизит. Данные передаются от компонентов верхнего уровня к низкоуровневым с помощью реквизита. Состояние обновляется в компоненте верхнего уровня с использованием обработчиков событий.

React native использует React Framework для создания компонентов для мобильных приложений. React native предоставляет базовый набор компонентов для платформ iOS и Android. Некоторыми компонентами в React Native являются Navigator, TabBar, Text, TextInput, View, ScrollView. Эти компоненты используют встроенные компоненты iOS UIKit и Android UI. React native также позволяет использовать NativeModules, где код, написанный на ObjectiveC для iOS и Java для Android, может использоваться в JavaScript.

vijayst
источник
41

Во-первых, сходство: оба React & React Native (RN) были разработаны для создания гибких пользовательских интерфейсов. У этих фреймворков есть масса преимуществ, но самым фундаментальным для них является то, что они созданы для разработки пользовательского интерфейса. Facebook разработал RN через несколько лет после React.

Реакция: Facebook разработал эту платформу так, чтобы она почти походила на написание вашего JavaScript внутри вашего HTML / XML, поэтому теги называются « JSX » (JavaScript XML) и похожи на знакомые HTML-подобные теги, такие как <div>или <p>. Отличительной чертой React являются теги заглавной буквы, которые обозначают пользовательский компонент, например <MyFancyNavbar />, который также существует в RN. Однако React использует DOM . DOM существует для HTML, поэтому React используется для веб-разработки.

React Native: RN не использует HTML и поэтому не используется для веб-разработки. Он используется для ... практически всего остального! Разработка для мобильных устройств (как для iOS, так и для Android), интеллектуальные устройства (например, часы, телевизоры), дополненная реальность и т. Д. Поскольку у RN нет DOM для взаимодействия, вместо использования HTML-тегов того же типа, что и в React, он использует свои собственные теги, которые затем компилируются в другие языки. Например, вместо <div>тегов разработчики RN используют встроенный <View>тег RN , который компилируется в другой встроенный код (например, android.viewна Android и UIViewна iOS).

Вкратце: они очень похожи (для разработки пользовательского интерфейса), но используются для разных сред.

Ryo-код
источник
Хороший ответ. Можете ли вы уточнить немного больше и добавить больше очков к этому. Было бы хорошо для людей, которые читают.
сарат
1
поместите этот ответ наверх
JerryGoyal
38
  1. React-Native - это фреймворк для разработки приложений для Android и iOS, на долю которого приходится 80% - 90% кода Javascript.

React.js - это родительская библиотека Javascript для разработки веб-приложений.

  1. В то время как вы используете теги наподобие <View>, <Text>очень часто в React-Native, React.js использует подобные веб-html-теги <div> <h1> <h2>, которые являются только синонимами в словаре веб / мобильных разработок.

  2. Для React.js вам нужен DOM для рендеринга путей html-тегов, а для мобильного приложения: React-Native использует AppRegistry для регистрации вашего приложения.

Я надеюсь, что это простое объяснение быстрых различий / сходств в React.js и React-Native.

Анураг Пракаш
источник
25

Мы не можем их точно сравнить. Есть различия в случае использования .

(Обновление 2018 года)


ReactJS

Основным направлением деятельности React является веб-разработка.

    • Виртуальный DOM React работает быстрее, чем обычная модель полного обновления , поскольку виртуальный DOM обновляет только части страницы.
    • Вы можете повторно использовать компоненты кода в React, сэкономив вам много времени. (Вы можете в React Native тоже.)
    • Как бизнес: полное отображение ваших страниц, от сервера до браузера, улучшит SEO вашего веб-приложения .
    • Это улучшает скорость отладки, облегчая жизнь вашему разработчику.
    • Вы можете использовать разработку гибридных мобильных приложений, таких как Cordova или Ionic, для создания мобильных приложений с помощью React, но более эффективно создавать мобильные приложения с помощью React Native из многих точек.

React Native

Расширение React , нишу на Mobile Development.

    • Основное внимание уделяется мобильным пользовательским интерфейсам .
    • iOS и Android покрыты.
    • Многократно используемые компоненты и модули React Native UI позволяют визуализировать гибридные приложения.
    • Не нужно ремонтировать ваше старое приложение. Все, что вам нужно сделать, это добавить компоненты React Native UI в код существующего приложения , без необходимости переписывать.
    • Не использует HTML для визуализации приложения . Предоставляет альтернативные компоненты, которые работают аналогичным образом, поэтому их не составит труда понять.
    • Поскольку ваш код не отображается на HTML-странице, это также означает, что вы не сможете повторно использовать библиотеки, которые вы ранее использовали в React , для рендеринга любого вида HTML, SVG или Canvas.
    • React Native не сделан из веб-элементов и не может быть стилизован таким же образом. До свидания CSS анимации!

Надеюсь, я помог тебе :)

Адриан Георге
источник
17

В простом смысле React и React native следуют тем же принципам проектирования, за исключением случая разработки пользовательского интерфейса.

  1. React native имеет отдельный набор тегов для определения пользовательского интерфейса для мобильных устройств, но оба используют JSX для определения компонентов.
  2. Главной целью обеих систем является разработка повторно используемых UI-компонентов и сокращение усилий по разработке их составов.
  3. Если вы правильно спланируете и структурируете код, вы можете использовать одну и ту же бизнес-логику для мобильных устройств и Интернета.

В любом случае, это отличная библиотека для создания пользовательского интерфейса для мобильных устройств и Интернета.

Манзур Самад
источник
16

React - это декларативная, эффективная и гибкая библиотека JavaScript для создания пользовательских интерфейсов. Ваши компоненты сообщают React, что вы хотите визуализировать, - тогда React будет эффективно обновлять и отображать только нужные компоненты при изменении ваших данных. Здесь ShoppingList - это класс компонента React или тип компонента React.

Приложение React Native - это настоящее мобильное приложение. С React Native вы не создаете «мобильное веб-приложение», «приложение HTML5» или «гибридное приложение». Вы создаете настоящее мобильное приложение, которое неотличимо от приложения, созданного с использованием Objective-C или Java. React Native использует те же основные строительные блоки пользовательского интерфейса, что и обычные приложения для iOS и Android.

Больше информации

Бипон Бисвас
источник
13

ReactJS - это базовая структура, предназначенная для построения компонента, изолированного на основе реактивного паттерна, вы можете думать о нем как о V от MVC, хотя я хотел бы сказать, что реакция дает другое ощущение, особенно если вы менее знакомы с реактивной концепцией ,

ReactNative - это еще один уровень, который должен иметь общий компонент для платформ Android и iOS. Таким образом, код выглядит в основном так же, как ReactJS, потому что это ReactJS, но изначально загружается на мобильных платформах. Вы также можете связать более сложный и относительный к платформе API с Java / Objective-C / Swift в зависимости от ОС и использовать его в React.

Necronet
источник
13

React Native изначально разрабатывался на JavaScript, что означает, что большая часть кода, необходимого для начала работы, может использоваться на разных платформах. React Native будет рендерить, используя нативные компоненты. Приложения React Native разрабатываются на языке, который требуется для платформы, на которую они нацелены, Objective-C или Swift для iOS, Java для Android и т. Д. Написанный код не распространяется на разные платформы, и их поведение различается. Они имеют прямой доступ ко всем функциям, предлагаемым платформой, без каких-либо ограничений.

React - это библиотека JavaScript с открытым исходным кодом, разработанная Facebook для создания пользовательских интерфейсов. Он используется для обработки слоя представления для веб-приложений и мобильных приложений. ReactJS используется для создания повторно используемых компонентов пользовательского интерфейса. В настоящее время это одна из самых популярных библиотек JavaScript в области ИТ, и у нее прочная основа и большое сообщество. Если вы изучаете ReactJS, вам необходимо знать JavaScript, HTML5 и CSS.

Рамья Рам
источник
12

React - это базовая абстракция React Native и React DOM , поэтому, если вы собираетесь работать с React Native, вам также понадобится React ... то же самое с сетью, но вместо React Native вам понадобится React DOM.

Поскольку React является базовой абстракцией, общий синтаксис и рабочий процесс одинаковы, но компоненты, которые вы используете, очень разные, поэтому вам нужно будет изучить эти различия, что соответствует React, так называемому moto, который называется «Изучить один раз где угодно», потому что если вы знаете React (базовая абстракция), вы можете просто изучить различия между платформами, не изучая другой язык программирования, синтаксис и рабочий процесс.

Шарлон М. Балбалоса
источник
11

React-Native - это фреймворк, где ReactJS - это библиотека javascript, которую вы можете использовать для своего веб-сайта.

React-native предоставляет базовые компоненты по умолчанию (изображения, текст), где React предоставляет набор компонентов и заставляет их работать вместе.

iPragmatech
источник
10

React Js - это библиотека Javascript, в которой вы можете разрабатывать и запускать более быстрые веб-приложения с помощью React.

React Native позволяет создавать мобильные приложения, используя только JavaScript, он используется для разработки мобильных приложений. дополнительная информация здесь https://facebook.github.io/react-native/docs/getting-started.html

Nischith
источник
9

Что касается жизненного цикла компонентов и всех других наворотов, то он в основном одинаков.

Разница в основном заключается в используемой разметке JSX. React использует тот, который напоминает HTML. Другой - это разметка, которая используется реагирующим для отображения представления.

Скотт Бланш
источник
8

React Native предназначен для мобильных приложений, а React для веб-сайтов (front-end). Оба являются фреймворками, придуманными Facebook. React Native - это кроссплатформенная среда разработки, означающая, что можно написать практически одинаковый код для IOS и Android, и это будет работать. Я лично знаю намного больше о React Native, поэтому я оставлю это на этом.

С. Синха
источник
8

React Js работает с HTML Dom. Но React native работает с компонентом UI для мобильных устройств (iOS / android).

Узама Зайд
источник
7

ReactJS - это библиотека javascript, которая используется для создания веб-интерфейсов. Вам понадобится такой пакет, как webpack, и попробуйте установить модули, необходимые для создания вашего сайта.

React Native - это инфраструктура javascript, которая поставляется со всем необходимым для написания мультиплатформенных приложений (таких как iOS или Android). Для сборки и развертывания вашего приложения вам потребуется установить xcode и android studio.

В отличие от ReactJS, React-Native не использует HTML, но аналогичные компоненты, которые вы можете использовать через IOS и Android для создания вашего приложения. Эти компоненты используют настоящие нативные компоненты для создания приложений для iOS и Android. Благодаря этому приложения React-Native выглядят реальными в отличие от других платформ разработки Hybrid. Компоненты также увеличивают возможность повторного использования вашего кода, поскольку вам не нужно снова создавать один и тот же пользовательский интерфейс на iOS и Android.

Ашиш Писей
источник
6

Проще говоря, ReactJS - это родительская библиотека, которая возвращает что-то для отображения в соответствии с хост-средой (браузер, мобильный телефон, сервер, рабочий стол и т. Д.). Помимо рендеринга, он также предоставляет другие методы, такие как ловушки жизненного цикла и т. Д.

В браузере он использует другую библиотеку реагировать на элементы DOM. В мобильных устройствах он использует компоненты React-Native для визуализации собственных компонентов пользовательского интерфейса для платформы (как для IOS, так и для Android). ТАК,

реагировать + реагировать-дом = развитие сети

реагировать + реагировать-родной = развитие мобильных

Rajender Dandyal
источник
4

REACT - это библиотека Javascript для создания больших / маленьких веб-приложений с интерфейсом, таких как Facebook.

REACT NATIVE - это инфраструктура Javascript для разработки собственных мобильных приложений на Android, IOS и Windows Phone.

Оба с открытым исходным кодом Facebook.

Даниэль Агус Сидабутар
источник
3

Вот различия, о которых я знаю:

  1. У них разные HTML-теги: React Native используется для обработки текста, а не в React.
  2. React Native использует Touchable компоненты вместо обычного элемента кнопки.
  3. React Native имеет компоненты ScrollView и FlatList для отображения списков.
  4. React Native использует AsyncStorage, а React использует локальное хранилище.
  5. В React Native маршрутизаторы функционируют как стек, а в React мы используем компоненты Route для отображения навигации.
пыльный
источник
3

В итоге: React.js для веб-разработки и React-Native для разработки мобильных приложений

Альберт А
источник
3

Реагировать против реагировать родной

ReactJS

  • React используется для создания веб-сайтов, веб-приложений, SPA и т. Д.
  • React - это библиотека Javascript, используемая для создания иерархии пользовательского интерфейса.
  • Он отвечает за рендеринг компонентов пользовательского интерфейса, рассматривается как V часть инфраструктуры MVC.
  • Виртуальный DOM React работает быстрее, чем обычная модель полного обновления, поскольку виртуальный DOM обновляет только части страницы, тем самым сокращая время обновления страницы.
  • React использует компоненты в качестве базовой единицы пользовательского интерфейса, который можно использовать повторно, что экономит время кодирования. Просто и легко учиться.

React Native

  • React Native - это инфраструктура, которая используется для создания кроссплатформенных приложений Native. Это означает, что вы можете создавать собственные приложения, и одно и то же приложение будет работать на Android и IOS.
  • У React native есть все преимущества ReactJS
  • React native позволяет разработчикам создавать собственные приложения в веб-стиле.
  • Разработчик внешнего интерфейса может легко стать разработчиком мобильных приложений.
GOVINDARAJ
источник
2

React Js - React JS - это библиотека javascript, большая библиотека, а не фреймворк

  • Это следует за компонентным подходом, который помогает в создании
    повторно используемых компонентов пользовательского интерфейса
    • Используется для разработки сложных интерактивных веб-приложений и мобильных интерфейсов.
    • Хотя он был открыт только в 2015 году, его поддерживает одно из крупнейших сообществ.

ReactNative - React Native - это платформа мобильных приложений с открытым исходным кодом.

Панкадж Гадхия
источник
2

Немного опоздал на вечеринку, но вот более полный ответ с примерами:

реагировать

React - это основанная на компонентах библиотека пользовательского интерфейса, которая использует «теневой DOM», чтобы эффективно обновлять DOM тем, что изменилось, вместо того, чтобы перестраивать все дерево DOM для каждого изменения. Первоначально он был создан для веб-приложений, но теперь может быть использован для мобильных устройств и 3D / vr.

Нельзя взаимозаменять компоненты между React и React Native, поскольку React Native сопоставляется с собственными мобильными элементами пользовательского интерфейса, но можно повторно использовать бизнес-логику и код, не связанный с визуализацией.

ReactDOM

Первоначально был включен в библиотеку React, но был выделен, когда React использовался для других платформ, а не только для веб. Он служит точкой входа в DOM и используется совместно с React.

Пример:

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 - это кроссплатформенная мобильная платформа, которая использует React и обменивается данными между Javascript и его нативным аналогом через «мост». В связи с этим при использовании React Native многие структуры пользовательского интерфейса должны отличаться. Например: при создании списка вы столкнетесь с серьезными проблемами с производительностью, если попытаетесь использовать mapего вместо React Native.FlatList . React Native можно использовать для создания мобильных приложений для IOS / Android, а также для умных часов и телевизоров.

Экспо

Expo - это начало работы с новым приложением React Native.

Expo - это фреймворк и платформа для универсальных приложений React. Это набор инструментов и сервисов, созданных на основе React Native и нативных платформ, которые помогают разрабатывать, создавать, развертывать и быстро выполнять итерации для iOS, Android и веб-приложений.

Примечание: при использовании Expo вы можете использовать только те API, которые они предоставляют. Все дополнительные библиотеки, которые вы включаете, должны быть чисто javascript или вам нужно будет выставить expo.

Тот же пример с использованием 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,
    },
});

Отличия:

  • Обратите внимание, что все, что находится за пределами рендера, может оставаться неизменным, поэтому код бизнес-логики / логики жизненного цикла можно повторно использовать в React и React Native.
  • В React Native все компоненты необходимо импортировать из реактивной или другой библиотеки пользовательского интерфейса.
  • Использование определенных API, которые сопоставляются с нативными компонентами, обычно будет более производительным, чем попытка обработать все на стороне JavaScript. ех. сопоставление компонентов для построения списка с использованием flatlist
  • Тонкие различия: такие вещи, как onClickпревращение onPress, React Native использует таблицы стилей для более эффективного определения стилей, а React Native использует flexbox в качестве структуры макета по умолчанию, чтобы обеспечить адаптивность.
  • Поскольку в React Native нет традиционного DOM, для React и React Native могут использоваться только чистые библиотеки javascript.

React360

Стоит также отметить, что React также можно использовать для разработки 3D / VR-приложений. Структура компонентов очень похожа на React Native. https://facebook.github.io/react-360/

Мэтт Кормовой
источник
1

activjs использует React-DOM, а не браузер DOM, в то время как React-Reative использует виртуальный DOM, но они используют один и тот же синтаксис, т. е. если вы можете использовать Reactjs, то вы можете использовать React-Native. Так как большинство библиотек, которые вы используете в Reactjs, доступны в React-Native как ваша реагирующая навигация и другие общие библиотеки, которые у них есть общие.

Solex
источник
Короткий ответ заключается в том, что реагирующая система создает мобильные приложения для iOS, Android и Windows Mobile, которые можно скомпилировать и поместить в магазины приложений для установки пользователями. Reactjs предназначен для создания веб-страниц для использования в веб-браузере. Оба используют повторно используемые компоненты, но синтаксис, который вы используете для визуализации элементов в компонентах (используя JSX), различен. React JSX отображает html-подобные компоненты, например <h1>, <p>и т. Д. Там, где Reaction-native отображает компоненты представления собственного приложения, например <View>и <Text>.
Ира Герман
1

В ответ на комментарий от @poshest выше приведена версия кода часов React Native, ранее опубликованная в React (извините, я не смог прокомментировать этот раздел напрямую, иначе я бы добавил туда код):

React Native code sample

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);

Обратите внимание , что стиль полностью мой выбор и не стремится непосредственно копировать внешний <h1>и <h2>теги , используемые в React код.

Мартин Н
источник
1

Некоторые различия заключаются в следующем:
1- React-Native - это платформа, которая использовалась для создания мобильных приложений, где ReactJS - это библиотека javascript, которую вы можете использовать для своего веб-сайта.
2- React-Native не использует HTML для визуализации приложения, в то время как React использует.
3- React-Native используется для разработки только мобильных приложений, а React - для веб-сайтов и мобильных устройств.

Нэвин
источник
0

React Native

  • Это фреймворк для создания нативных приложений с использованием JavaScript.

  • Он компилируется в нативные компоненты приложения, что позволяет вам создавать нативные мобильные приложения.

  • Не нужно ремонтировать ваше старое приложение. Все, что вам нужно сделать, это добавить компоненты React Native UI в код существующего приложения, без необходимости переписывать.

Реагировать JS

  • Он поддерживает как интерфейсную сеть, так и работает на сервере, для создания пользовательских интерфейсов и веб-приложений.

  • Это также позволяет нам создавать повторно используемые компоненты пользовательского интерфейса.

  • Вы можете повторно использовать компоненты кода в React JS, сэкономив вам много времени.

хакер
источник
0

React.js, часто называемый React или ReactJS, - это библиотека JavaScript, отвечающая за построение иерархии компонентов пользовательского интерфейса или, другими словами, за отображение компонентов пользовательского интерфейса. Он обеспечивает поддержку как внешнего интерфейса, так и серверной части.

React Native - это фреймворк для создания нативных приложений с использованием JavaScript. React Native компилирует в нативные компоненты приложения, что позволяет вам создавать нативные мобильные приложения. В React JS React является базовой абстракцией React DOM для веб-платформы, в то время как с React Native React остается базовой абстракцией, но React Native. Таким образом, синтаксис и рабочий процесс остаются одинаковыми, но компоненты разные.

Пракаш Шарма
источник