跳到主要内容

跨平台实现

注意

本文档引用了新架构，该架构正在积极推广中。

React Native 渲染器采用了一套可在各平台间共享的核心渲染实现​

在 React Native 之前的渲染系统中，React 影子树（React Shadow Tree）、布局逻辑和视图扁平化（View Flattening）算法需要针对每个平台单独实现。当前的渲染器通过共享核心 C++ 实现，旨在成为一种跨平台的解决方案。

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

利用 C++ 构建核心渲染系统带来了诸多优势。单一的实现降低了开发和维护成本。它提升了创建 React 影子树和布局计算的性能，因为在 Android 上将 Yoga 与渲染器集成的开销降到了最低（即不再需要通过 JNI 调用 Yoga）。最后，每个 React 影子节点（React Shadow Node）在 C++ 中的内存占用比使用 Kotlin 或 Swift 分配时更小。

该团队还利用了 C++ 中强制不可变性（immutability）的特性，以确保不会出现与共享但未受保护资源并发访问相关的问题。

必须承认，Android 的渲染器用例在以下两种主要场景中仍会产生 JNI 开销：

  • 复杂视图（如 Text、TextInput 等）的布局计算需要通过 JNI 发送属性（props）。
  • 挂载（mount）阶段需要通过 JNI 发送变更操作。

团队正在探索使用一种新的机制来代替 ReadableMap，通过 ByteBuffer 序列化数据，以减少 JNI 开销。我们的目标是将 JNI 开销降低 35%–50%。

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

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

对于 (i)，React 与渲染器通信以渲染 React 树，并“监听”事件（例如 onLayout、onKeyPress、触摸事件等）。

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

Cross-platform implementation diagram