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

424

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

  • 9
    Все дают словарный ответ, когда большинство людей, задающих этот вопрос, просто хотят знать, насколько они взаимозаменяемы: насколько легко перенести свой код React на React Native? Вам нужно будет переписать интерфейс вашего веб-приложения в другой код React, если вы хотите использовать его на iPad? Как отличается?
  • 5
    Каковы основные различия между ReactJS и React-Native? ссылка здесь medium.com/@alexmngn/…
Теги:
react-native
javascript-framework

26 ответов

481
Лучший ответ

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

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

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

  • 1
    @LemuelAdane Вот сообщение от Facebook о том, как это сделать: facebook.github.io/react/docs/environments.html . Вот хорошее введение, которое объясняет, как это реализовать: maketea.co.uk/2014/06/30/…
  • 34
    Итак, если я создаю приложение в реагировать на нативном языке, можно ли повторно использовать любое из них в реагировать на реакцию или наоборот?
Показать ещё 10 комментариев
165

Google не может объяснить это вам, как вы сказали, но Google был бы так счастлив, если бы изобрел React.

Вот проект React (https://github.com/facebook/react).

В Facebook они изобрели React, поэтому JavaScript может быстрее управлять сайтом DOM с использованием виртуальной модели DOM.

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

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

React native (https://github.com/facebook/react-native) является лишь следствием реакции. Это платформа для создания собственных приложений с использованием JavaScript.

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

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

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

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

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

  • 2
    Мне лично этот ответ больше нравится, так как он более подробный и предлагает ссылки на дальнейшие объяснения.
51

React:

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

React Native:

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

Итак, в основном 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

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

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

Реагировать на родные приложения 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.

25
  • React-Native - это платформа для разработки приложений для Android и iOS, которые разделяют 80% -90% кода Javascript.

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

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

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

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

12

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

Реагирование: Facebook (который разработал RN через несколько лет после реагирования) разработал эту структуру почти так же, как писать свой 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).

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

  • 0
    Хороший ответ. Можете ли вы уточнить немного больше и добавить больше очков к этому. Было бы хорошо для людей, которые читают.
12

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

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

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

10

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

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

10

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

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

9

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

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


ReactJS

имеет основное внимание: веб-разработка

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

ReactNative

расширение реагирования, достигнутое в области развития мобильных устройств.

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

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

8

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

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

8

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

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

7

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

7

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

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

7

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

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

6

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

  1. В React native есть отдельный набор тегов для определения пользовательского интерфейса для мобильных устройств, но для определения интерфейсов реагирование использует html-css.
  2. Основная цель обеих систем - повторно использовать пользовательские интерфейсы.
  3. Оба следуют компонентной архитектуре.

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

4

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

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

4

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

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

Оба являются открытыми для Facebook.

4

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

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

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

3

В Facebook они изобрели React, поэтому JavaScript может манипулировать веб-сайтом DOM быстрее, используя виртуальные модели DOM. Вот проект React (https://github.com/facebook/react). Полное обновление DOM происходит медленнее по сравнению с моделями React virtual-dom, которые обновляют только часть страницы (читай: частичное обновление).

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

React native (https://github.com/facebook/react-native) является следствием реакции. Это платформа для создания собственного приложения с использованием JavaScript.

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

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

3

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

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

React.js

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

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

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

React.js был разработан Facebook, чтобы удовлетворить его потребность в динамическом и высокопроизводительном пользовательском интерфейсе (UI). В 2011 году Jordan Walke и его команда из Facebook выпустили библиотеку React JS, библиотеку JavaScript, которая объединила скорость JavaScript и новый способ рендеринга страниц, что привело к быстрому и динамичному пользователю. В 2015 году, через два года после того, как команда открыла React.js, и ее популярность выросла, они выпустили React Native.

0

реагирует на использование команды activ-dom, а не на браузер dom, а в программе native native используется виртуальный dom, но в обоих случаях используется один и тот же синтаксис, т.е. если вы можете использовать реактив, то вы можете использовать реактив. как ваша реагирующая навигация и другие общие библиотеки, которые у них есть общие.

0

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

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

0

React Native предназначен для мобильных устройств, а React - для веб-приложений

0

ReactJS предназначен для Интернета, а React Native - для мобильных устройств. Не переусердствуйте.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню