React Native 架构解析：一张图看懂 Fabric

2023-09-20 16:11:15

在深入探究 React Native 新架构之前，我们先来回顾一下它的旧架构。

React Native 旧架构采用的是基于 JavaScriptCore 的单线程架构，即 JavaScript 和 Native 线程都在同一个线程中运行。这种架构存在一些局限性，比如：

性能瓶颈： 当 JavaScript 线程执行耗时任务时，会导致 Native 线程也被阻塞，影响应用的流畅度。
内存消耗大： JavaScriptCore 占用大量的内存，这会给移动设备的内存带来压力。
跨平台兼容性差： 由于 JavaScriptCore 的实现依赖于特定的平台，因此不同平台上的 React Native 应用可能存在兼容性问题。

为了解决这些问题，React Native 团队开发了新的架构，其中最核心的部分就是 Fabric。Fabric 是 React Native 新架构中的渲染器，它将 JavaScript 线程和 Native 线程分离，从而解决了旧架构中的性能瓶颈问题。同时，Fabric 还采用了全新的跨平台桥接机制，提高了不同平台上的兼容性。

Fabric 的主要特性：

跨平台： Fabric 采用全新的跨平台桥接机制，使得 React Native 应用可以在不同的平台上无缝运行，而无需对代码进行修改。
性能优化： Fabric 将 JavaScript 线程和 Native 线程分离，解决了旧架构中的性能瓶颈问题。
内存优化： Fabric 移除了 JavaScriptCore，大大降低了内存消耗。
模块化： Fabric 是一个模块化的架构，可以根据需要进行扩展和定制。

Fabric 的工作原理：

Fabric 的工作原理可以概括为以下几个步骤：

JavaScript 线程将渲染指令发送给 Fabric。
Fabric 将渲染指令桥接到 Native 线程。
Native 线程执行渲染指令，更新 UI。
Native 线程将渲染结果返回给 Fabric。
Fabric 将渲染结果桥接到 JavaScript 线程。

Fabric 的优势：

Fabric 的优势主要体现在以下几个方面：

性能提升： 分离 JavaScript 线程和 Native 线程，解决了旧架构中的性能瓶颈问题。
内存优化： 移除了 JavaScriptCore，大大降低了内存消耗。
跨平台兼容性： 全新的跨平台桥接机制，提高了不同平台上的兼容性。
模块化： 模块化的架构，可以根据需要进行扩展和定制。

Fabric 的应用：

Fabric 目前已经应用于 React Native 的最新版本中，它为 React Native 的开发带来了诸多好处。例如：

更流畅的应用： Fabric 分离了 JavaScript 线程和 Native 线程，解决了旧架构中的性能瓶颈问题，使得 React Native 应用更加流畅。
更小的内存占用： Fabric 移除了 JavaScriptCore，大大降低了内存消耗，这对于移动设备的内存管理非常有益。
更好的跨平台兼容性： Fabric 的跨平台桥接机制，提高了不同平台上的兼容性，使得 React Native 应用可以更加轻松地在不同的平台上运行。

总结：

Fabric 是 React Native 新架构中渲染器，是新架构的主要部分，也是新旧架构中变化最大的地方。Fabric 带来了诸多好处，例如性能提升、内存优化、跨平台兼容性增强等。随着 Fabric 的不断发展，我们相信 React Native 的开发体验和应用性能将会得到进一步的提升。