Перейти к содержанию

Модель потоков

Рендерер React Native распределяет работу конвейера рендеринга между несколькими потоками.

Здесь мы определим модель потоков и приведем несколько примеров, иллюстрирующих использование потоков в конвейере рендеринга.

Рендерер React Native спроектирован таким образом, чтобы быть потокобезопасным. На высоком уровне безопасность потоков гарантируется использованием неизменяемых структур данных во внутренних компонентах фреймворка (что обеспечивается функцией "const correctness" в C++). Это означает, что каждое обновление в React создает или клонирует новые объекты в рендере вместо обновления структур данных. Это позволяет фреймворку предоставлять потокобезопасные и синхронные API для React.

Рендерер использует три различных потока:

  • Поток пользовательского интерфейса (часто называемый основным): Единственный поток, который может манипулировать представлениями хоста.
  • Поток JavaScript: Здесь выполняется фаза рендеринга React.
  • Фоновый поток: Поток, предназначенный для компоновки.

Давайте рассмотрим поддерживаемые сценарии выполнения для каждой фазы:

Threading model symbols

Сценарии рендеринга

Рендеринг в фоновом потоке

Это наиболее распространенный сценарий, когда большая часть конвейера рендеринга происходит на JavaScript и в фоновом потоке.

Threading model use case one

Рендеринг в потоке пользовательского интерфейса

Когда на UI Thread происходит событие с высоким приоритетом, рендерер может выполнить весь конвейер рендеринга синхронно на UI thread.

Threading model use case two

Прерывание по умолчанию или непрерывное событие

Этот сценарий показывает прерывание фазы рендеринга событием с низким приоритетом в потоке пользовательского интерфейса. React и рендерер React Native способны прервать фазу рендеринга и объединить ее состояние с событием с низким приоритетом, которое выполняется в потоке UI. В этом случае процесс рендеринга продолжает выполняться в фоновом потоке.

Threading model use case three

Прерывание по дискретному событию

Фаза рендеринга может прерываться. Этот сценарий показывает прерывание фазы рендеринга высокоприоритетным событием в потоке пользовательского интерфейса. React и рендерер могут прервать фазу рендеринга и объединить ее состояние с высокоприоритетным событием, которое было выполнено в потоке UI. Фаза рендеринга выполняется синхронно в потоке UI.

Threading model use case four

Фоновый поток собирает обновления от JavaScript

Прежде чем фоновый поток отправит обновление потоку UI, он проверяет, не поступило ли более новое обновление от JavaScript. Таким образом, рендерер не выводит устаревшее состояние, когда знает, что придет более новое состояние.

Threading model use case five

Обновление состояния C++

Обновление происходит в потоке пользовательского интерфейса и пропускает фазу рендеринга. Подробнее см. в React Native Renderer State Updates.

Threading model use case six

Комментарии