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

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

Любое приложение React Native состоит из трех компонентов: нативный код (например, Android, iOS), код JavaScript (React) и мост“bridge”, который интерпретирует код Javascript для выполнения на нативных платформах, таких как Android и iOS, и позволяет нативному коду взаимодействовать с кодом JavaScript. Другими словами, мост React Native’ позволяет взаимодействовать между родным и JavaScript кодом.

Ниже показано, как работает приложение React Native:

Существует три потока: Главный (нативный) поток запускается первым и порождает поток JavaScript, а затем теневой поток (также известный как теневое дерево).

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

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

Шаги 2 и 3 постоянно повторяются снова и снова во время каждой итерации цикла событий JavaScript’.

*Важно: Одной из ключевых особенностей является то, что JavaScript является однопоточным, что означает, что каждое обновление события должно быть “run-to-completion”—each update is processed fully before the next update. Вот почему, когда у вас слишком много обновлений, идущих в главный поток, и слишком много событий, возвращающихся в поток JavaScript, это может привести к низкой производительности. Цикл событий JavaScript использует очередь сообщений для хранения всех обновлений и должен последовательно обрабатывать эти сообщения (обновления). Архитектура JavaScript’ показана ниже.