Сколько потоков выполняется в приложении React Native?

Если вы хотите стать разработчиком React Native и освоили создание базовых приложений для Android и iOS, то одна из самых важных вещей — изучить процесс выполнения потоков. Если вы понимаете, как выполняется нативное приложение React и сколько потоков оно использует, это поможет вам создавать более эффективные приложения.

Что такое нить?

Можно сказать, что поток — это набор инструкций, которые должен выполнять ЦП. Поток — это компонент процесса, а процесс — это работающая программа.

Жизненный цикл потока:

Как мы знаем, JavaScript работает асинхронно, поэтому взаимодействие с пользовательским интерфейсом компонента React также обрабатывается асинхронно. По сути, поток JavaScript обрабатывает пользовательские события прослушивания, события прокрутки и т. д. и соответственно выполняет манипуляции с DOM, и весь этот процесс является асинхронным по отношению к основному потоку и пользовательскому интерфейсу. Затем он далее отправляется в поток модуля React Native для DOM и для оптимизации, который далее отправляется в очередь основного потока. Изменения отражаются в пользовательском интерфейсе при выполнении основной очереди потоков.

Подытожим образ жизни тредов в три этапа:

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

Сколько потоков в React Native: нативная архитектура React основана на потоках. По сути, есть 4 потока, которые выполняют все операции:

1. поток пользовательского интерфейса
2. JS-поток
3. Собственный поток модуля
4. Визуализация потока

Поток собственного пользовательского интерфейса React (основной поток): это основной поток, выполняющий синхронные операции. Это также называется потоком пользовательского интерфейса, потому что он находится в конце всей нашей иерархии компонентов. Этот поток передавал данные из Shadow Thread. Например, в Android этот поток используется для обработки событий Android Measure/Layout/Draw.

Поток JavaScript: Поток JavaScript выполняет логику кода React и JavaScript в нашем приложении. Этот поток выполнял все операции с иерархией DOM, прямо взятые из кода, написанного разработчиками. Как только иерархия кода выполнена, она отправляется в поток модуля Native для оптимизации и дальнейших операций.

Поток React Native Modules: этот поток используется, когда приложению требуется доступ к API платформы. Например, если вы работаете с анимацией, вам может потребоваться установить собственный драйвер для обработки ваших анимаций.

React Native Render Thread: этот поток используется только Android L (5.0) для отрисовки пользовательского интерфейса с помощью OpenGL. Это используется только в определенных ситуациях, поэтому его нельзя включить в основной поток. Это полностью необязательно.

Проблемы в React Native Threads: Если вы понимаете жизненный цикл этих трех потоков в React Native (JS Thread, UI Thread и React Native Modules Thread), у вас есть представление о том, почему возникают проблемы с производительностью в React Native.

Проблемы с использованием потоков:

• Блокировка анимации в потоке JS.
• Из-за тайм-аутов или анимации происходят медленные переходы навигации.
• Большое количество места занимает DOM.
• Заикание во время логики монтажа компонентов.

Вывод: теперь вам должно быть ясно, что такое поток, сколько потоков и как они играют роль в приложении React Native.