跳到主要内容

跨平台实现

注意

本文档引用了正在积极推行中的新架构

React Native 渲染器利用核心渲染实现以在不同平台间共享

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

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

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

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

值得注意的是,渲染器在 Android 上的使用场景仍然会产生 JNI 的开销,主要有以下两种情况:

  • 复杂视图(例如 `Text`、`TextInput` 等)的布局计算需要通过 JNI 传输属性。
  • 挂载阶段需要通过 JNI 传输变异操作。

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

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

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

对于**(i)**,React 与渲染器通信以**渲染**一个 React 树并“监听”**事件**(例如 `onLayout`、`onKeyPress`、触摸等)。

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

Cross-platform implementation diagram