Skip to main content

跨平台实现

提醒

本文档涉及正在积极推出的 新架构。

¥This document refers to the New Architecture, that is in active roll-out.

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

¥The React Native renderer utilizes a core render implementation to be shared across platforms

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

¥In the previous render system of React Native, the React Shadow Tree, layout logic, and View Flattening algorithm were implemented once for each platform. The current renderer was designed to be a cross-platform solution by sharing a core C++ implementation.

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

¥The React Native team intends to incorporate an animation system into the render system and also extend the React Native render system to new platforms such as Windows, and operating systems in game consoles, televisions, and more.

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

¥Leveraging C++ for the core render system introduces several advantages. A single implementation reduces the cost of development and maintenance. It improves the performance of creating React Shadow Trees and layout calculation because the overhead of integrating Yoga with the renderer is minimized on Android (i.e. no more JNI for Yoga). Finally, the memory footprint of each React Shadow Node is smaller in C++ than it would be if allocated from Kotlin or Swift.

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

¥The team is also leveraging C++ features that enforce immutability to ensure there are no issues related to concurrent access to shared but not protected resources.

重要的是要认识到，Android 的渲染器用例仍然会导致两个主要用例的 JNI 成本：

¥It is important to recognize that the renderer use case for Android still incurs the cost of JNI for two primary use cases:

  • 复杂视图（例如 Text、TextInput 等）的布局计算需要通过 JNI 发送 props。

    ¥Layout calculation of complex views (e.g. Text, TextInput, etc.) requires sending props over JNI.

  • 挂载阶段需要通过 JNI 发送突变操作。

    ¥The mount phase requires sending mutation operations over JNI.

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

¥The team is exploring replacing ReadableMap with a new mechanism to serialize data using ByteBuffer to reduce overhead of JNI. Our goal is to reduce overhead of JNI by 35–50%.

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

¥The renderer provides two sides of its C++ APIs:

  • (i) 与 React 通信

    ¥(i) to communicate with React

  • (ii) 与主机平台通信

    ¥(ii) to communicate with the host platform

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

¥For (i), React communicates with the renderer to render a React Tree and to “listen” for events (e.g. onLayout, onKeyPress, touch, etc).

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

¥For (ii), the React Native renderer communicates with the host platform to mount host views on the screen (create, insert, update or delete of host views) and it listens for events that are generated by the user on the host platform.

Cross-platform implementation diagram