跳到主要内容

跨平台实现

注意

本文档指的是正在积极推广的新架构

React Native 渲染器利用一个核心渲染实现,以便在平台之间共享

在之前的 React Native 渲染系统中,React Shadow Tree、布局逻辑和 视图扁平化 算法每个平台都实现一次。当前的渲染器被设计为跨平台解决方案,通过共享核心 C++ 实现。

React Native 团队计划将动画系统整合到渲染系统中,并将 React Native 渲染系统扩展到新的平台,例如 Windows,以及游戏机、电视等操作系统。

为核心渲染系统利用 C++ 引入了几个优势。单一实现降低了开发和维护成本。它提高了创建 React Shadow Tree 和布局计算的性能,因为在 Android 上,将 Yoga 与渲染器集成的开销最小化了(即不再需要用于 Yoga 的 JNI)。最后,每个 React Shadow Node 的内存占用量在 C++ 中比从 Kotlin 或 Swift 分配要小。

该团队还在利用 C++ 的强制不变性功能,以确保不会出现与并发访问共享但未受保护的资源相关的问题。

重要的是要认识到,对于 Android 的渲染器用例,仍然会产生 JNI 的成本,主要用于以下两种情况:

  • 复杂视图(例如 TextTextInput 等)的布局计算需要通过 JNI 发送 props。
  • 挂载阶段需要通过 JNI 发送突变操作。

该团队正在探索使用新的机制(ByteBuffer)序列化数据来替换 ReadableMap,以减少 JNI 的开销。我们的目标是将 JNI 的开销减少 35–50%。

渲染器提供了其 C++ API 的两个方面:

  • (i) 与 React 通信
  • (ii) 与宿主平台通信

对于 (i),React 与渲染器通信以渲染 React 树并“监听”事件(例如 onLayoutonKeyPress、touch 等)。

对于 (ii),React Native 渲染器与宿主平台通信,以在屏幕上挂载宿主视图(创建、插入、更新或删除宿主视图),并监听用户在宿主平台上生成的事件

Cross-platform implementation diagram