跳至主要内容

跨平台实现

注意

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

React Native 渲染器利用核心渲染实现来跨平台共享

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

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

利用 C++ 作为核心渲染系统带来了诸多优势。单一实现降低了开发和维护成本。它提高了创建 React 阴影树和布局计算的性能,因为将Yoga与渲染器集成的开销在 Android 上降至最低(即不再需要用于 Yoga 的JNI)。最后,每个 React 阴影节点的内存占用在 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、触摸等)。

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

Cross-platform implementation diagram