Модель потоков¶
Рендерер React Native распределяет работу конвейера рендеринга между несколькими потоками.
Здесь мы определим модель потоков и приведем несколько примеров, иллюстрирующих использование потоков в конвейере рендеринга.
Рендерер React Native спроектирован таким образом, чтобы быть потокобезопасным. На высоком уровне безопасность потоков гарантируется использованием неизменяемых структур данных во внутренних компонентах фреймворка (что обеспечивается функцией "const correctness" в C++). Это означает, что каждое обновление в React создает или клонирует новые объекты в рендере вместо обновления структур данных. Это позволяет фреймворку предоставлять потокобезопасные и синхронные API для React.
Рендерер использует три различных потока:
- Поток пользовательского интерфейса (часто называемый основным): Единственный поток, который может манипулировать представлениями хоста.
- Поток JavaScript: Здесь выполняется фаза рендеринга React.
- Фоновый поток: Поток, предназначенный для компоновки.
Давайте рассмотрим поддерживаемые сценарии выполнения для каждой фазы:
Сценарии рендеринга¶
Рендеринг в фоновом потоке¶
Это наиболее распространенный сценарий, когда большая часть конвейера рендеринга происходит на JavaScript и в фоновом потоке.
Рендеринг в потоке пользовательского интерфейса¶
Когда на UI Thread происходит событие с высоким приоритетом, рендерер может выполнить весь конвейер рендеринга синхронно на UI thread.
Прерывание по умолчанию или непрерывное событие¶
Этот сценарий показывает прерывание фазы рендеринга событием с низким приоритетом в потоке пользовательского интерфейса. React и рендерер React Native способны прервать фазу рендеринга и объединить ее состояние с событием с низким приоритетом, которое выполняется в потоке UI. В этом случае процесс рендеринга продолжает выполняться в фоновом потоке.
Прерывание по дискретному событию¶
Фаза рендеринга может прерываться. Этот сценарий показывает прерывание фазы рендеринга высокоприоритетным событием в потоке пользовательского интерфейса. React и рендерер могут прервать фазу рендеринга и объединить ее состояние с высокоприоритетным событием, которое было выполнено в потоке UI. Фаза рендеринга выполняется синхронно в потоке UI.
Фоновый поток собирает обновления от JavaScript¶
Прежде чем фоновый поток отправит обновление потоку UI, он проверяет, не поступило ли более новое обновление от JavaScript. Таким образом, рендерер не выводит устаревшее состояние, когда знает, что придет более новое состояние.
Обновление состояния C++¶
Обновление происходит в потоке пользовательского интерфейса и пропускает фазу рендеринга. Подробнее см. в React Native Renderer State Updates.