ReactNative中的线程与渲染器

ReactNative至少存在三个线程：

主线程（UI线程）
JavaScript线程
Backgroud线程（布局线程或是ShadowQueue 线程）

主线程

React Native 应用本质是 iOS 应用或 Android 应用，因此，在启动时，操作系统也会为其创建唯一可操作视图的主线程。无论是 iOS 应用还是 Android 应用，在启动应用的时候，系统都会为该应用创建一个主线程，来负责用户交互和界面绘制，而除了主线程外，其他线程是不可以操作视图的。

JavaScript线程

JavaScript 线程是用于执行 JavaScript 脚本的线程。大多数情况下，JavaScript 脚本会交由 JavaScript 引擎来执行，比如处理点击手势、拼接接口字段、发起请求和执行 React Render 函数等任务。但值得注意的是，并不是任何的 JavaScript 脚本的执行都在 JavaScript 线程进行。

Backgroud线程

ShadowQueue 线程是用于布局的线程。React Native 应用的布局任务，会交由 Yoga 布局引擎来执行，而 Yoga 布局引擎的执行，大多数情况下，是在 ShadowQueue 线程执行的。

Fabric渲染器

Fabric 渲染器完成的主要任务还是将你声明的组件转换为最终原生 API 的调用。

Fabric 渲染器的转换过程主要涉及到 3 棵树：Element Tree、Fiber Tree、Shadow Tree。

Element Tree

Element Tree 是在 JavaScript 侧，由 React 通过开发者书写的 JSX 创建而成的，它由若干个 Element 组成。

一棵 Element Tree 的每个节点都是一个 Element。React Element 有两种类型，一种是通过函数或类自定义的合成组件生成的，另一种是宿主组件生成的。其中，宿主组件指的框架通过 JavaScript 引擎暴露给 JavaScript 的原生组件。

在 React 层， Element Tree 会被映射为 Fiber Tree。

Fiber Tree

Fiber Tree 是由若干个 Fiber 节点组成的，如果某个 Fiber 节点是通过用于描述宿主视图的 Element 生成的，那么该 Fiber 会对应一个同样的宿主视图。

Fiber 是 React 16 之后引入的新能力，它使得 React 每次可渲染的颗粒度更小了，由 React 16 之前的一次 render 所有节点，变为了一次 render 时可分批次对节点进行操作。因此，从渲染角度，我们还可以将 Fiber 节点看做每次 render 的最小的渲染单位，它能让 Fabric 渲染器更快更智能。

在 React 内部，Fiber 节点是由 createFiberFromElement 函数创建的。从名字上可以看出，Fiber 节点是由 Element 节点生成的。进一步地，Fiber Tree 也可以看做 Element Tree 的映射。

同样，Fiber 节点也分两种，一种是由合成组件生成的 Element 所映射的 Fiber 节点，它没有对应的宿主组件的实例；一种是由宿主组件生成 Element 所映射的 Fiber 节点，它拥有对应的宿主组件实例。