[Перевод] Graphical React Native

JavaScript React.js React Native
[Перевод] Graphical React Native

Оригинальная ссылка:учись реагировать.дизайн/2017/06/20/…

Причины поставить лайк: Любовь к иллюстрациям, ярким и интересным, уникальный ракурс.

Особая благодарность: оригинальному авторуLinton Yeлюблю корректуру

Серия блогов: Объяснение терминологии React с точки зрения непрофессионала и каракулей

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

цель обучения

Когда вы закончите читать эту статью, надеюсь, вы вернетесь сюда и сможете легко ответить на следующие вопросы:

  • Что такое React Native? Почему в его названии есть слово «родной»?
  • Почему React Native такой крутой?
  • Что мы можем разработать с помощью React Native и React соответственно?
  • Почему появляется ReactDOM? Что оно делает?
  • Для чего используется React renderer (рендерер)?
  • Как работает React Sketch.app?
  • Как работает ReactVR?
  • Что такое ReactJS? Что такое React.js?

больше, чем сеть

После изучения предыдущей статьи у вас в голове должна сложиться такая картина:

Как вы знаете, React — отличный инструмент для разработки пользовательских интерфейсов в Интернете. Использование React для разработки пользовательского интерфейса позволяет вам описывать то, что вы хотите, вместо того, чтобы сообщать пользовательскому интерфейсу, как обновлять (реактивный пользовательский интерфейс), организовывать свой код в повторно используемые компоненты и создавать производительные пользовательские интерфейсы, не беспокоясь о сверхнизкой скорости DOM (виртуальный DOM). Все больше и больше разработчиков выбирают React, потому что он позволяет разработчикам сосредоточиться на бизнесе верхнего уровня, а не на деталях базовых обновлений DOM. Мы называем этот способ разработки пользовательского интерфейса парадигмой React. Парадигма — это в основном то, как вы думаете о проблеме, как эта проблема описывается и как решается.

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

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

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

Это немного похоже на работу в иностранной студии, где сотрудники должны говорить на разных языках. Вам нужно владеть всеми языками, чтобы общаться со всеми моделями. Это звучит как много неприятностей, не так ли?

Итак, если вы хотите, чтобы ваше собственное приложение работало как на iOS, так и на Android, вам нужно создать две совершенно отдельные кодовые базы. Одну и ту же бизнес-логику нужно писать дважды. Разработка приложений сложна и дорога, особенно с точки зрения долгосрочного обслуживания.

Именно поэтому родился React Native. Давайте посмотрим, как это значительно упрощает процесс разработки.

React Native

Рендерер и новый React

Для веб-приложений React отвечает за включение парадигмы React (управление реактивным пользовательским интерфейсом, компонентами и виртуальным DOM), а также фактическое обновление DOM в браузере (общение с Domo). React легко справляется с обеими задачами, когда DOM — единственный объект, с которым нужно взаимодействовать.

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

Чтобы решить эту проблему, создатели React разделили оригинальный React на две части. Первая часть — это совершенно новый React, который отвечает только за включение парадигмы React. Вторая часть называется ReactDOM, и ее единственная задача — взаимодействовать с DOM в браузере. Поскольку ReactDOM отвечает за обновление DOM, а DOM определяет, что отображает браузер, мы называем ReactDOM средством визуализации.

Представьте, что наш супергерой снимает свой плащ и бросает на него волшебную пыль.

Плащ сразу ожил и стал маленьким помощником супергероя. Освободившись от оков общения с Домо, Реакт теперь может сосредоточиться на том, что у него получается лучше всего.

Эта идея разделения ролей очень мощная. Теперь нам просто нужно поддерживать общую основную библиотеку при написании совершенно новых средств визуализации для новой платформы. Этот метод намного проще, чем предыдущий. Благодаря мощной поддержке средств визуализации iOS и Android теперь вы можетеИспользуйте только один язык и одну и ту же парадигму Reactразрабатывать приложения для обеих платформ одновременно.

React просто должен сосредоточиться на том, что он делает хорошо. Рендерер отвечает за связь.

полная платформа

Официальное определение веб-сайта React: библиотека JavaScript для разработки пользовательских интерфейсов. Его значение имеет два уровня: во-первых, это инструмент для разработки пользовательского интерфейса, а во-вторых, он не затрагивает никакой другой области, кроме разработки пользовательского интерфейса.

Фактически,Вы не можете разработать полноценное приложение только на React. Например, вам нужен CSS для стилизации, вам нужен веб-пакет для упаковки, вам нужен Firebase для сохранения данных и т. д.

Реальная сцена в студии «веб-браузера» гораздо более занята, чем вы видели раньше.

Это нормально в среде веб-разработки, поскольку React — это библиотека JavaScript, поэтому она естественным образом сочетается с другими виджетами в веб-среде. Эти виджеты либо являются родными библиотеками JavaScript, либо могут быть легко адаптированы к JavaScript. В конце концов, JavaScript — это стандартный язык в Интернете.

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

React Native включает в себя больше вещей, чем React в Интернете:

  • Совершенно новый React как основная библиотека (наш супергерой, только без плаща)
  • Рендереры для iOS и Android
  • ...

React Sketch.app

WindowsmacOSVR

  1. iOS
  2. snack.expo.io/

const Hat = ...

const Thinker = ...

// 下面的代码是 React Native 版本的
// Web 版本的话，只需将 “View” 替换成 “div”
const ThinkerWithHat = ({hat}) => (
  <View>
    <Thinker />
    <Hat type={hat}/>
  </View>
);

const HatSwitcher = ...

...

Категории