Skip to main content

Fabric新架构

介绍​

React Native 的 Fabric 架构是在 2018 年 React Conf 大会上首次提出的。它的核心特性之一是采用了 JavaScript Interface (JSI) 来替代传统的桥（Bridge）机制。这个改变带来了若干显著的好处：

  1. 同步调用
  • 旧架构：在旧的 React Native 架构中，JavaScript 和原生模块之间的交互是基于异步的桥机制。这意味着所有的通信都需要通过事件队列，导致响应时间延迟。
  • Fabric 架构：通过 JSI，Fabric 允许 JavaScript 直接调用原生代码，这些调用是同步的。这减少了通信延迟，提高了应用程序的响应速度和性能。
  1. 性能提升
  • 更高效的交互：由于减少了桥的异步开销，应用程序的整体性能得到提升。这特别对于复杂的用户界面和高频更新的场景非常有利。
  • 流畅的用户体验：更快的同步调用可以实现更加平滑和流畅的用户界面交互。
  1. 简化的架构
  • 直接交互：JSI 允许 JavaScript 和原生代码之间更直接的交互，这使得整体架构更为简洁。
  • 减少抽象层：去除了复杂的桥机制，降低了架构的复杂性。
  1. 跨平台一致性
  • 统一的接口：JSI 提供了统一的接口，这使得在不同平台（如 iOS 和 Android）上实现功能的一致性变得更容易。
  1. 更好的开发体验
  • 简化的调试：由于减少了异步操作，调试变得更直接，开发者可以更容易地跟踪和理解代码的执行流程。

JSI(JavaScript Interface)原理​

JavaScript Interface (JSI) 是 React Native 在其新架构中引入的一种新机制，用于改善和替代传统的桥（Bridge）机制。JSI 的工作原理可以从以下几个方面来理解：

  1. 使用 C++ 作为底层桥梁 统一的 C++ 层：JSI 在其内部使用 C++ 作为底层的通信层，使得与不同的原生平台（如 iOS 和 Android）之间的交互更加统一和高效。 原生模块的包装：原生模块可以通过 C++ 被包装，然后直接暴露给 JavaScript 环境。

  2. 因为重写了中间层，所以 JavaScript 可以直接与原生代码交互

  • 直接调用：与传统的桥机制不同，JSI 允许 JavaScript 代码直接调用原生代码（C++ 或 Objective-C/Swift、Java/Kotlin），而无需通过异步的消息队列。这意味着调用可以同步进行，减少了响应时间。
  • 内存共享：JSI 使得 JavaScript 和原生侧可以共享内存。这减少了在原生和 JavaScript 之间传输大量数据时的序列化和反序列化的需要。
  1. 更好的跨平台支持
  • 统一接口：JSI 提供了一组统一的接口，使得在不同的平台（iOS 和 Android）上实现相同的功能变得更加容易。
tip

为什么说统一接口那？ 以为底层用c++重写了通信机制，从而能够有效保证参数类型有效统一。

总结​

JSI 的引入显著改进了 React Native 的架构，它提供了更直接、更高效的方式来实现 JavaScript 与原生代码之间的互操作。这种方法减少了通信延迟，简化了内存管理，提高了整体性能，同时还增加了开发过程中的灵活性和效率。

QA​

  1. 使用jsi后任然需要序列化，但是序列化提效了，到底是如何提效的？