京东正式开源Taro on HarmonyOS C-API 版本，为鸿蒙应用跨端开发提供高性能框架
<p>近日，京东正式开源了Taro on HarmonyOS C-API 版本，为鸿蒙应用跨端开发提供高性能框架。这次版本的发布，带来了更丰富的样式适配、更高效的渲染性能、更全面的组件支持，让开发者以Web范式的方式来开发出媲美鸿蒙性能的应用，为鸿蒙应用生态的丰富注入强大的动力。</p><p><img src="https://img2024.cnblogs.com/blog/3637060/202506/3637060-20250623160907015-1437399461.jpg"></p>
<p style="text-align: center">图：京东鸿蒙版应用</p>
<h2><strong>整体技术架构</strong></h2>
<p>Taro on HarmonyOS 技术方案支持开发者使用 React DSL 来开发鸿蒙应用，在整体架构上可以简单分为三层：</p>
<p><img src="https://img2024.cnblogs.com/blog/3637060/202506/3637060-20250623160906913-790396078.png"></p>
<p style="text-align: center">图：Taro on HarmonyOS React</p>
<p>最上层是应用业务代码所在的 ArkVM 层，这一层在 C-API 版本中主要运行业务代码、React 的核心代码以及少量的 Taro 运行时代码。</p>
<p>中间层是 Taro 的 CSSOM 和 TaroElement 树，负责处理上层 Taro 运行时代码传递下来的指令，比如 TaroElement 节点树创建，绑定关系以及设置属性等操作。</p>
<p>最下层存放的是 TaroRenderNode 虚拟节点树，这棵节点树和真正的上屏节点树是一一对应的关系，同时在 TaroRenderNode 节点树内会创建对应的 Yoga 节点。</p>
<p><img src="https://img2024.cnblogs.com/blog/3637060/202506/3637060-20250623160906958-550250137.png"></p>
<p style="text-align: center">图：Taro on HarmonyOS React DOM</p>
<p>同时，Taro还基于鸿蒙提供的VSync机制设置一套任务处理管线，来处理中间层和下层节点树产生的样式匹配、节点测量、节点布局、样式设置以及节点上屏等任务，来保证任务的时序性和最后上屏渲染结果的正确性。</p>
<h2><strong>重点特性</strong></h2>
<p>在特性方面，Taro on HarmonyOS 技术方案具备“丰富的能力支持、媲美 ArkTS 的高性能、支持 C-API 渲染模式”等三大重点特性。</p>
<p>(1) 丰富的能力支持</p>
<p>C-API 版本的 Taro on HarmonyOS支持常用组件和 API ，不仅支持React 18+，还支持View、Text、Image、Video 等近33个Taro组件，以及支持如getSystemInfo、getStorage 等常用的API，针对逻辑较为复杂的 API 如：createSelectorQuery 以及 createIntersectionObserver，也在C++侧进行了重新的实现，大幅提升了执行性能。</p>
<p>此外C-API 版本支持大部分常见的 CSS 能力：</p>
<p>支持常见的 CSS 样式和布局，支持 flex、伪类和伪元素</p>
<p>支持常见的 CSS 定位，绝对定位、fixed 定位</p>
<p>支持常见的 CSS 选择器和媒体查询</p>
<p>支持常见的 CSS 单位，比如 vh、vw 以及计算属性 calc</p>
<p>支持 CSS 变量以及安全区域等预定义变量</p>
<p>同时，在参考浏览器 CSSOM 的实现方式基础上，在C++实现了一套 CSSOM 逻辑，里面包含了样式解析、样式匹配、样式合成和应用整个链路的样式处理逻辑。</p>
<p><img src="https://img2024.cnblogs.com/blog/3637060/202506/3637060-20250623160906933-109954331.png" style="display: block; margin-left: auto; margin-right: auto"></p>
<p style="text-align: center">图：Taro on HarmonyOS CSS</p>
<p>另外，Taro 引入了 Yoga 布局引擎来计算渲染节点的位置和大小，最大程度保证 Taro 构建出来的鸿蒙应用中渲染样式和 W3C 规范的一致性。</p>
<p><img src="https://img2024.cnblogs.com/blog/3637060/202506/3637060-20250623160906985-1820991571.png"></p>
<p style="text-align: center">图：Taro on HarmonyOS Style</p>
<p>(2) 媲美 ArkTS 的高性能</p>
<p>在 C-API 的版本中，ArkVM 层的 Taro 运行时内容已削减到非常薄，将 TaroElement 的大部分内容都下沉到了 C++ 侧，并在 ArkVM 层取消了他们之间父子关系的绑定，极大地提升了 TaroElement 相关逻辑的性能。</p>
<p><img src="https://img2024.cnblogs.com/blog/3637060/202506/3637060-20250623160907015-243902967.png"></p>
<p style="text-align: center">图：Taro on HarmonyOS CAPI</p>
<p>另一方面，在 C++ 侧 Taro 会指令式地调用 ArkUI 在 C++ 侧提供的 API，来高效地创建节点、设置属性、绑定事件以及绘制上屏。</p>
<p>Taro 还针对长列表场景针对性地提供了长列表类型组件，并对长列表类型组件进行了优化，提供了懒加载、预加载和节点复用等功能，有效地解决大数据量下的性能问题，提高应用的流畅度和用户体验。</p>
<p><img src="https://img2024.cnblogs.com/blog/3637060/202506/3637060-20250623160906950-1888182876.png"></p>
<p style="text-align: center">图：Taro on HarmonyOS Virtual List</p>
<p>(3) 支持 C-API 的渲染模式</p>
<p>Taro 的组件和 API 是以小程序作为基准来进行设计的，因此在实际的鸿蒙应用开发过程中，会出现部分所需的组件和 API 在 Taro 中不存在的情况，因为针对这种情况，在 C-API 版本中，Taro 支持将初始页面或者组件混合编译到 Taro 鸿蒙项目中，支持 Taro 组件和鸿蒙组件在页面上的混合使用。</p>
<p><img src="https://img2024.cnblogs.com/blog/3637060/202506/3637060-20250623160907001-518089675.png"></p>
<p style="text-align: center">图：Taro on HarmonyOS CAPI Hybrid</p>
<h2><strong>使用指南</strong></h2>
<p>Taro on HarmonyOS技术方案已开源至Github，开发者可搜索“taro”以获取更多信息：</p>
<p><img src="https://img2024.cnblogs.com/blog/3637060/202506/3637060-20250623160906973-1116858877.png"></p>
<p>使用前，开发者可先安装Harmony插件</p>
<p><img src="https://img2024.cnblogs.com/blog/3637060/202506/3637060-20250623160906997-376906990.png"></p>
<p>添加插件配置</p>
<p><img src="https://img2024.cnblogs.com/blog/3637060/202506/3637060-20250623160906994-1831308549.png"></p>
<p>编译项目</p>
<p><img src="https://img2024.cnblogs.com/blog/3637060/202506/3637060-20250623160906999-1509640941.png"></p>
<p>如果需要编译鸿蒙应用，同时使用编译鸿蒙组件，可以在页面配置中添加 entryOption: false 表示该页面是组件，同时可以用过 componentName 指定组件导出名。</p>
<p><img src="https://img2024.cnblogs.com/blog/3637060/202506/3637060-20250623160906972-1865199759.png"></p>
<p>Taro on HarmonyOS C-API 版本经历了京东鸿蒙 APP 的实践，从综合性能、生态以及开发体验都更上一层楼。未来，京东团队还会基于当前的 Taro on HarmonyOS C-API 方案，进行多线程的架构升级以及 React 的 C++ 化，进一步提升 Taro 在鸿蒙端侧的性能，并极大地降低应用的丢帧率。欢迎广大开发者一起参与 Taro on HarmonyOS 的共建，推动 Taro 更好发展。</p>
<p>华为在未来也将持续携手生态伙伴共建创新，面向底座技术、通用能力、垂类行业等场景推出系列开发者场景化解决方案，不断提升鸿蒙应用的创新体验和开发效率，与广大开发者共建繁荣的鸿蒙生态。</p>
<p><img src="https://img2024.cnblogs.com/blog/3637060/202506/3637060-20250623160906944-1431224454.png"></p><br><br>
来源：https://www.cnblogs.com/HarmonyOS5/p/18944536
頁:
[1]