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

Мы могли бы создать множество приложений на платформе React Native. Но что происходит в низкоуровневом коде в собственном проекте?

Давайте сначала узнаем, что именно происходит в низкоуровневом коде.

Потоки в приложении React Native

В приложении React Native есть 4 потока:

1. Поток пользовательского интерфейса: также известен как основной поток. Это используется для рендеринга пользовательского интерфейса Android или iOS. Например, в Android этот поток используется для измерения / компоновки / рисования Android.
2. Поток JS: поток JS или поток Javascript – это поток, в котором будет выполняться логика. Например, это поток, в котором выполняется код javascript приложения, выполняются вызовы API, обрабатываются события касания и многое другое. Обновления собственных представлений группируются и отправляются на собственную сторону в конце каждого цикла событий в потоке JS (и в конечном итоге выполняются в потоке пользовательского интерфейса). Для поддержания хорошей производительности поток JS должен иметь возможность отправлять пакетные обновления потоку пользовательского интерфейса до крайнего срока рендеринга следующего кадра. Например, iOS отображает 60 кадров в секунду, и это приводит к появлению нового кадра каждые 16,67 мс. Если вы выполните сложную обработку в своем цикле событий javascript, которая приводит к изменениям пользовательского интерфейса и занимает более 16,67 мс, пользовательский интерфейс будет казаться вялым. Единственным исключением являются собственные представления, которые полностью выполняются в потоке пользовательского интерфейса, например, navigatorIOS или scrollview полностью выполняются в потоке пользовательского интерфейса и, следовательно, не блокируются из-за медленного потока js.
3. Поток собственных модулей: иногда приложению требуется доступ к API платформы, и это происходит как часть потока собственных модулей.
4. Поток рендеринга: только в Android L (5.0) собственный поток рендеринга реакции используется для генерации фактических команд OpenGL, используемых для рисования вашего пользовательского интерфейса.

Процесс, задействованный в работе React Native

1. При первом запуске приложения основной поток запускает выполнение и загружает пакеты JS.
2. Когда код JavaScript был успешно загружен, основной поток отправляет его в другой поток JS, потому что, когда JS выполняет некоторые сложные вычисления в потоке некоторое время, поток пользовательского интерфейса при этом не пострадает.
3. Когда React начинает рендеринг, Reconciler начинает «различать», а когда он генерирует новый виртуальный DOM (макет), он отправляет изменения в другой поток (теневой поток).
4. Теневой поток вычисляет макет, а затем отправляет параметры / объекты макета в основной (UI) поток. (Здесь вы можете спросить, почему мы называем это «тенью»? Потому что он генерирует теневые узлы)
5. Поскольку только основной поток может отображать что-либо на экране, теневой поток должен отправлять сгенерированный макет в основной поток, и только после этого выполняется визуализация пользовательского интерфейса.

Разделение React Native

Как правило, мы можем разделить React Native на 3 части:

1. React Native – Родная сторона
2. React Native – сторона JS
3. React Native – мост

Это часто называют «3 части React Native».