图:京东鸿蒙版应用
Taro on HarmonyOS 技术方案支持开发者使用 React DSL 来开发鸿蒙应用,在整体架构上可以简单分为三层:
最上层是应用业务代码所在的 ArkVM 层,这一层在 C-API 版本中主要运行业务代码、React 的核心代码以及少量的 Taro 运行时代码。
最下层存放的是 TaroRenderNode 虚拟节点树,这棵节点树和真正的上屏节点树是一一对应的关系,同时在 TaroRenderNode 节点树内会创建对应的 Yoga 节点。
同时,Taro还基于鸿蒙提供的VSync机制设置一套任务处理管线,来处理中间层和下层节点树产生的样式匹配、节点测量、节点布局、样式设置以及节点上屏等任务,来保证任务的时序性和最后上屏渲染结果的正确性。
在特性方面,Taro on HarmonyOS 技术方案具备“丰富的能力支持、媲美 ArkTS 的高性能、支持 C-API 渲染模式”等三大重点特性。
C-API 版本的 Taro on HarmonyOS支持常用组件和 API ,不仅支持React 18+,还支持View、Text、Image、Video 等近33个Taro组件,以及支持如getSystemInfo、getStorage 等常用的API,针对逻辑较为复杂的 API 如:createSelectorQuery 以及 createIntersectionObserver,也在C++侧进行了重新的实现,大幅提升了执行性能。
同时,在参考浏览器 CSSOM 的实现方式基础上,在C++实现了一套 CSSOM 逻辑,里面包含了样式解析、样式匹配、样式合成和应用整个链路的样式处理逻辑。
另外,Taro 引入了 Yoga 布局引擎来计算渲染节点的位置和大小,最大程度保证 Taro 构建出来的鸿蒙应用中渲染样式和 W3C 规范的一致性。
(2)媲美 ArkTS 的高性能
图:Taro on HarmonyOS CAPI
Taro 还针对长列表场景针对性地提供了长列表类型组件,并对长列表类型组件进行了优化,提供了懒加载、预加载和节点复用等功能,有效地解决大数据量下的性能问题,提高应用的流畅度和用户体验。
(3)支持 C-API 的渲染模式
图:Taro on HarmonyOS CAPI Hybrid
Taro on HarmonyOS技术方案已开源至Github,开发者可搜索“taro”以获取更多信息:GitHub – NervJS/taro-harmony-capi-library
添加插件配置
如果需要编译鸿蒙应用,同时使用编译鸿蒙组件,可以在页面配置中添加 entryOption: false 表示该页面是组件,同时可以用过 componentName 指定组件导出名。
华为在未来也将持续携手生态伙伴共建创新,面向底座技术、通用能力、垂类行业等场景推出系列开发者场景化解决方案,不断提升鸿蒙应用的创新体验和开发效率,与广大开发者共建繁荣的鸿蒙生态。

