Как работает React Native

logo react native

В этой статье я постараюсь кратко и понятно объяснить, как работает React Native.

Немного истории

Во времена, когда еще не было технологий для кроссплатформенной разработки (таких как Apache Cordova и React Native) приходилось изучать язык программирования Java, чтобы написать приложение для Android, и Objective C, чтобы написать приложение для iPhone. Согласитесь, что уйдет много времени на то, чтобы изучить два языка и написать одно и то же приложение два раза: для Android и iPhone.

Тогда великие умы стали думать: «как же сделать так, чтобы мы написали код всего один раз и он работал и на Android, и на iPhone?»

Так была придумана Apache Cordova. Мы пишем приложение на HTML, CSS, JavaScript (прямо как сайт), а Cordova запускает его в браузере на телефоне. Такой подход значительно ускорил процесс разработки приложений. Но он имеет некоторые недостатки:

  1. существующие плагины для Cordova быстро устаревают и нужно писать свои;
  2. так как приложение запускается в браузере, то возникают сложности в получении обратной связи с нативным приложением;
  3. нужно постараться над оптимизацией приложения, чтобы оно работало быстро и стабильно.
  4. все равно приложения на Apache Cordova выглядят и в использовании не такие приятные, как нативные приложения.

Поэтому ребята из Facebook решили сделать штуку, которая позволит писать код один раз и он будет работать везде. И эта штука должна быть лишена недостатков Cordova. Так появился React Native.

React Native

React Native приложения написаны на языке JavaScript. НО! Итоговое приложение, то, которое мы запускаем на телефоне, использует нативный код (Java для Android, Objective C для iOS). В итоге мы получаем такое же приложения, как если бы писали его на нативном языке: элементы управления, внешний вид и жесты работают так же, как в нативном приложении. Магия! Но как это происходит?

Каждое React Native приложение имеет два важных потока:

  1. Основной поток — он запускается абсолютно в каждом нативном приложении. Он обрабатывает отображение элементов пользовательского интерфейса и жесты пользователя.
  2. JavaScript поток — он выполняет код JavaScript в отдельном движке. JavaScript имеет дело с бизнес-логикой приложения. Он определяет КАК работает приложение.

А как эти потоки общаются между собой? Как JavaScript узнает, какую кнопку нажал пользователь? Или как основной поток узнает, какое окно отобразить?

За общение между двумя потоками отвечает так называемый мост (bridge) — это ядро React Native. Мост позволяет потокам общаться наилучшим, оптимизированным способом. Он служит посредником, который разруливает запросы и входящие данные от двух потоков. Такой подход позволяет им общаться асинхронно, что приводит к стабильной работе, потому что потоки никогда не смогут заблокировать друг-друга.

Чтобы стало более понятно, представьте себе мост, посередине которого пограничный контроль. Он решает кто поедет через мост, а кто нет.

как работает React Native
Иллюстрация работы React Native.

Подытожим

Как я для себя понял: React Native — это цирк, в котором JavaScriptкукловод, который дергает за ниточки куклуJava или Objective C.

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

Спасибо за внимание

Советую

Как работает React Native: 8 комментариев

    1. Сергей, спасибо Вам за отзыв! Мне приятно, что эта статья оказалась для Вас полезной )

  1. Пришел в надежде на более глубокое объяснение, но эта статейка тоже ничего

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

    1. Виталий, спасибо Вам за отзыв! Я рад, что эта статья оказалась для Вас полезной 🙂

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *