跳到主要内容
新架构实战课 实操 + 基建 + 原理全维度包揽，抢先掌握 React Native 新架构精髓 立即查看 >

线程模型

caution

This document refers to the architecture of the new renderer, Fabric, that is in active roll-out.

React Native 渲染器在多个线程之间分配渲染流水线（render pipeline）任务。​

接下来我们会给线程模型下定义，并提供一些示例来说明渲染流水线的线程用法。

React Native 渲染器是线程安全的。从更高的视角看，在框架内部线程安全是通过不可变的数据结果保障的，其使用的是 C++ 的 const correctness 特性。这意味着，在渲染器中 React 的每次更新都会重新创建或复制新对象，而不是更新原有的数据结构。这是框架把线程安全和同步 API 暴露给 React 的前提。

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

  • UI 线程（主线程）：唯一可以操作宿主视图的线程。
  • JavaScript 线程：这是执行 React 渲染阶段的地方。
  • 后台线程：专门用于布局的线程。

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

Threading model symbols

渲染场景​

在后台线程中渲染​

这是最常见的场景，大多数的渲染流水线发生在 JavaScript 线程和后台线程。

Threading model use case one

在主线程中渲染​

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

Threading model use case two

默认或连续事件中断​

在这个场景中，UI 线程的低优先级事件中断了渲染步骤。React 和 React Native 渲染器能够中断渲染步骤，并把它的状态和一个在 UI 线程执行的低优先级事件合并。在这个例子中渲染过程会继续在后台线程中执行。

Threading model use case three

不相干的事件中断​

渲染步骤是可中断的。在这个场景中， UI 线程的高优先级事件中断了渲染步骤。React 和渲染器是能够打断渲染步骤的，并把它的状态和 UI 线程执行的高优先级事件合并。在 UI 线程渲染步骤是同步执行的。

Threading model use case four

来自 JavaScript 线程的后台线程批量更新

在后台线程将更新分派给 UI 线程之前，它会检查是否有新的更新来自 JavaScript。 这样，当渲染器知道新的状态要到来时，它就不会直接渲染旧的状态。

Threading model use case five

C++ 状态更新​

更新来自 UI 线程，并会跳过渲染步骤。更多细节请参考 React Native 渲染器状态更新。

Threading model use case six