京东正式开源Taro on HarmonyOS C-API 版本,为鸿蒙应用跨端开发提供高性能框架

2025-05-29 17:54:42     来源:

近日,京东正式开源了Taro on HarmonyOS C-API 版本,为鸿蒙应用跨端开发提供高性能框架。这次版本的发布,带来了更丰富的样式适配、更高效的渲染性能、更全面的组件支持,让开发者以Web范式的方式来开发出媲美鸿蒙性能的应用,为鸿蒙应用生态的丰富注入强大的动力。

图:京东鸿蒙版应用

整体技术架构

Taro on HarmonyOS 技术方案支持开发者使用 React DSL 来开发鸿蒙应用,在整体架构上可以简单分为三层:

图:Taro on HarmonyOS React

最上层是应用业务代码所在的 ArkVM 层,这一层在 C-API 版本中主要运行业务代码、React 的核心代码以及少量的 Taro 运行时代码。

中间层是 Taro 的 CSSOM 和 TaroElement 树,负责处理上层 Taro 运行时代码传递下来的指令,比如 TaroElement 节点树创建,绑定关系以及设置属性等操作。

最下层存放的是 TaroRenderNode 虚拟节点树,这棵节点树和真正的上屏节点树是一一对应的关系,同时在 TaroRenderNode 节点树内会创建对应的 Yoga 节点。

图:Taro on HarmonyOS React DOM

同时,Taro还基于鸿蒙提供的VSync机制设置一套任务处理管线,来处理中间层和下层节点树产生的样式匹配、节点测量、节点布局、样式设置以及节点上屏等任务,来保证任务的时序性和最后上屏渲染结果的正确性。

重点特性

在特性方面,Taro on HarmonyOS 技术方案具备“丰富的能力支持、媲美 ArkTS 的高性能、支持 C-API 渲染模式”等三大重点特性。

(1) 丰富的能力支持

C-API 版本的 Taro on HarmonyOS支持常用组件和 API ,不仅支持React 18+,还支持View、Text、Image、Video 等近33个Taro组件,以及支持如getSystemInfo、getStorage 等常用的API,针对逻辑较为复杂的 API 如:createSelectorQuery 以及 createIntersectionObserver,也在C++侧进行了重新的实现,大幅提升了执行性能。

此外C-API 版本支持大部分常见的 CSS 能力:

支持常见的 CSS 样式和布局,支持 flex、伪类和伪元素

支持常见的 CSS 定位,绝对定位、fixed 定位

支持常见的 CSS 选择器和媒体查询

支持常见的 CSS 单位,比如 vh、vw 以及计算属性 calc

支持 CSS 变量以及安全区域等预定义变量

同时,在参考浏览器 CSSOM 的实现方式基础上,在C++实现了一套 CSSOM 逻辑,里面包含了样式解析、样式匹配、样式合成和应用整个链路的样式处理逻辑。

图:Taro on HarmonyOS CSS

另外,Taro 引入了 Yoga 布局引擎来计算渲染节点的位置和大小,最大程度保证 Taro 构建出来的鸿蒙应用中渲染样式和 W3C 规范的一致性。

图:Taro on HarmonyOS Style

(2)媲美 ArkTS 的高性能

在 C-API 的版本中,ArkVM 层的 Taro 运行时内容已削减到非常薄,将 TaroElement 的大部分内容都下沉到了 C++ 侧,并在 ArkVM 层取消了他们之间父子关系的绑定,极大地提升了 TaroElement 相关逻辑的性能。

图:Taro on HarmonyOS CAPI

另一方面,在 C++ 侧 Taro 会指令式地调用 ArkUI 在 C++ 侧提供的 API,来高效地创建节点、设置属性、绑定事件以及绘制上屏。

Taro 还针对长列表场景针对性地提供了长列表类型组件,并对长列表类型组件进行了优化,提供了懒加载、预加载和节点复用等功能,有效地解决大数据量下的性能问题,提高应用的流畅度和用户体验。

图:Taro on HarmonyOS Virtual List

(3)支持 C-API 的渲染模式

Taro 的组件和 API 是以小程序作为基准来进行设计的,因此在实际的鸿蒙应用开发过程中,会出现部分所需的组件和 API 在 Taro 中不存在的情况,因为针对这种情况,在 C-API 版本中,Taro 支持将初始页面或者组件混合编译到 Taro 鸿蒙项目中,支持 Taro 组件和鸿蒙组件在页面上的混合使用。

图:Taro on HarmonyOS CAPI Hybrid

使用指南

Taro on HarmonyOS技术方案已开源至Github,开发者可搜索“taro”以获取更多信息:

使用前,开发者可先安装Harmony插件

添加插件配置

编译项目

如果需要编译鸿蒙应用,同时使用编译鸿蒙组件,可以在页面配置中添加 entryOption: false 表示该页面是组件,同时可以用过 componentName 指定组件导出名。

Taro on HarmonyOS C-API 版本经历了京东鸿蒙 APP 的实践,从综合性能、生态以及开发体验都更上一层楼。未来,京东团队还会基于当前的 Taro on HarmonyOS C-API 方案,进行多线程的架构升级以及 React 的 C++ 化,进一步提升 Taro 在鸿蒙端侧的性能,并极大地降低应用的丢帧率。欢迎广大开发者一起参与 Taro on HarmonyOS 的共建,推动 Taro 更好发展。

华为在未来也将持续携手生态伙伴共建创新,面向底座技术、通用能力、垂类行业等场景推出系列开发者场景化解决方案,不断提升鸿蒙应用的创新体验和开发效率,与广大开发者共建繁荣的鸿蒙生态。

 

标签:

猜你喜欢

UPPAbaby成都快闪活动:沉浸式体验引领亲子生活新潮流
手机“罢工”遇援手,华为服务暖归途
中国移动助力中国石油发布3000亿参数昆仑大模型
机构建议重塑港A配比,港股AI龙头成配置核心标的
中国三星“2025科技新农机项目”:打通农机应用“最后一公里”
拜尔斯道夫旗下品牌优色林携「第二代」光引精华亮相亚洲色素病大会,强势开启2025“色素管理元年”
IOIO国际奥林匹克科学艺术奖发布会在京举办,共探科艺融合新未来
油气技术风向标 2025中国油气开发技术年会暨油气开发新成果及新技术展示会将于7月2日-4日在北京召开
开启科学预防幽门螺杆菌新时代!人民日报健康客户端与无幽日记品牌方联合发布全民健康防护新方案
东呈酒店集团:存量时代,通过全域会员运营重构增长引擎
金融科普进万家,桔子数科构筑全链条金融消费者保护体系
以技术重塑健康之美,用真心铸造品牌口碑! ——康躰健康体雕总裁安慈女士
端午将至国风民俗类首饰走俏 京东五彩绳搜索量增长超4倍
会稽山·兰亭高价拍卖,以文化之魂重塑收藏价值标杆
AppGallery腰部胶囊导航,一键提升找应用效率
特朗普政府收紧学生签证,瑞士、爱尔兰等欧洲国家成留学选择新风向
京东心动购物季3C配件再创新高 雷电扩展坞成交额同比增长超350%
新生代企业家的抉择:他们如何看中国经济的未来
钱峰雷掌舵经纬天地 重塑业务版图
商业保险与医药产业融合高质量发展论坛亮点释放 深度解码带病体保险发展
安斯泰来和辉瑞的安可坦(恩扎卢胺)在转移性激素敏感性前列腺癌患者中显示出长期总生存获益
端午开浪!2025新津码头潮玩地图已加载,粽享狂欢盛宴
浙江国家级知识产权服务出口基地及IP服务机构再次亮相国际盛会
一个包裹的“智慧”足迹
Vitafoods Europe现场直击:品质销量双冠王VIKPRO引领欧洲健康产业新变革
BBC全新史前科学纪录片《与恐龙同行》5月28日独家上线爱奇艺,尖端视效还原史前传奇
以刻刀为笔,写就黄花梨家具传奇|记中国工艺美术大师林庆财
京东服饰为重庆乡村中学赠送发育期文胸 助力留守女孩健康成长
中国首个!名创优品荣获全球授权业顶级奖项
新赋能•创生态 | 首钢园“产业跃升计划”发布会举办,促进产业合作交流走深走实