Skip to main content

线程模型

提醒

本文档涉及正在积极推出的 新架构。

¥This document refers to the New Architecture, that is in active roll-out.

React Native 渲染器将 渲染管线 的工作分配给多个线程。​

¥The React Native renderer distributes the work of the render pipeline across multiple threads.

这里我们定义了线程模型并提供了一些示例来说明渲染管道的线程使用。

¥Here we define the threading model and provide some examples to illustrate thread usage of the render pipeline.

React Native 渲染器被设计为线程安全的。在高级别的线程安全性是通过在框架内部使用不可变的数据结构来保证的（由 C++“常量正确性”功能强制执行）。这意味着 React 中的每次更新都会在渲染器中创建或克隆新对象，而不是更新数据结构。这允许框架向 React 公开线程安全和同步的 API。

¥React Native renderer is designed to be thread safe. At a high level thread safety is guaranteed by using immutable data structures in the internals of the framework (enforced by C++ “const correctness” feature). This means that every update in React creates or clones new objects in the renderer instead of updating data structures. This allows the framework to expose thread safe and synchronous APIs to React.

渲染器使用两个不同的线程：

¥The renderer uses two different threads:

  • UI 线程（通常称为主线程）：唯一可以操作宿主视图的线程。

    ¥UI thread (often called main): The only thread that can manipulate host views.

  • JavaScript 线程：这是执行 React 的渲染阶段和布局的地方。

    ¥JavaScript thread: This is where React’s render phase, as well as layout, are executed.

让我们回顾一下每个阶段支持的执行场景：

¥Let’s review the supported scenarios of execution for each phase:

Threading model symbols

渲染场景​

¥Render Scenarios

在 JS 线程中渲染​

¥Render in a JS Thread

这是最常见的场景，其中大部分渲染管道发生在 JavaScript 线程上。

¥This is the most common scenario where most of the render pipeline happens on JavaScript thread.

Threading model use case one

在 UI 线程中渲染​

¥Render in the UI Thread

当 UI 线程上有高优先级事件时，渲染器能够在 UI 线程上同步执行所有渲染管道。

¥When there is a high priority event on the UI Thread, the renderer is able to execute all the render pipeline synchronously on the UI thread.

Threading model use case two

默认或连续事件中断​

¥Default or continuous event interruption

此场景显示 UI 线程中的低优先级事件导致渲染阶段中断。React 和 React Native 渲染器能够中断渲染阶段并将其状态与在 UI 线程上执行的低优先级事件合并。在这种情况下，渲染进程继续在 JS 线程中执行。

¥This scenario shows the interruption of the render phase by a low priority event in the UI thread. React and the React Native renderer are able to interrupt the render phase and merge its state with a low priority event that is executed on the UI thread. In this case the render process continues executing in the JS thread.

Threading model use case three

离散事件中断​

¥Discrete event interruption

渲染阶段是可中断的。此场景显示 UI 线程中的高优先级事件导致渲染阶段中断。React 和渲染器能够中断渲染阶段并将其状态与在 UI 线程上执行的高优先级事件合并。渲染阶段在 UI 线程上同步执行。

¥The render phase is interruptible. This scenario shows the interruption of the render phase by a high priority event in the UI thread. React and the renderer are able to interrupt the render phase and merge its state with a high priority event that was executed on the UI thread. The render phase executes synchronously on the UI thread.

Threading model use case four

C++ 状态更新​

¥C++ State update

源自 UI 线程的更新并跳过渲染阶段。详细信息请参见 React Native 渲染器状态更新。

¥Update originating on UI thread and skips rendering phase. See React Native Renderer State Updates for more details.

Threading model use case six