京東正式開(kāi)源Taro on HarmonyOS C-API 版本，為鴻蒙應用跨端開(kāi)發(fā)提供高性能框架

近日，京東正式開(kāi)源了Taro on HarmonyOS C-API 版本，為鴻蒙應用跨端開(kāi)發(fā)提供高性能框架。這次版本的發(fā)布，帶來(lái)了更豐富的樣式適配、更高效的渲染性能、更全面的組件支持，讓開(kāi)發(fā)者以Web范式的方式來(lái)開(kāi)發(fā)出媲美鴻蒙性能的應用，為鴻蒙應用生態(tài)的豐富注入強大的動(dòng)力。

圖：京東鴻蒙版應用

整體技術(shù)架構

Taro on HarmonyOS 技術(shù)方案支持開(kāi)發(fā)者使用 React DSL 來(lái)開(kāi)發(fā)鴻蒙應用，在整體架構上可以簡(jiǎn)單分為三層：

圖：Taro on HarmonyOS React

最上層是應用業(yè)務(wù)代碼所在的 ArkVM 層，這一層在 C-API 版本中主要運行業(yè)務(wù)代碼、React 的核心代碼以及少量的 Taro 運行時(shí)代碼。

中間層是 Taro 的 CSSOM 和 TaroElement 樹(shù)，負責處理上層 Taro 運行時(shí)代碼傳遞下來(lái)的指令，比如 TaroElement 節點(diǎn)樹(shù)創(chuàng )建，綁定關(guān)系以及設置屬性等操作。

最下層存放的是 TaroRenderNode 虛擬節點(diǎn)樹(shù)，這棵節點(diǎn)樹(shù)和真正的上屏節點(diǎn)樹(shù)是一一對應的關(guān)系，同時(shí)在 TaroRenderNode 節點(diǎn)樹(shù)內會(huì )創(chuàng )建對應的 Yoga 節點(diǎn)。

圖：Taro on HarmonyOS React DOM

同時(shí)，Taro還基于鴻蒙提供的VSync機制設置一套任務(wù)處理管線(xiàn)，來(lái)處理中間層和下層節點(diǎn)樹(shù)產(chǎn)生的樣式匹配、節點(diǎn)測量、節點(diǎn)布局、樣式設置以及節點(diǎn)上屏等任務(wù)，來(lái)保證任務(wù)的時(shí)序性和最后上屏渲染結果的正確性。

重點(diǎn)特性

在特性方面，Taro on HarmonyOS 技術(shù)方案具備“豐富的能力支持、媲美 ArkTS 的高性能、支持 C-API 渲染模式”等三大重點(diǎn)特性。

（1） 豐富的能力支持

C-API 版本的 Taro on HarmonyOS支持常用組件和 API ，不僅支持React 18+，還支持View、Text、Image、Video 等近33個(gè)Taro組件，以及支持如getSystemInfo、getStorage 等常用的API，針對邏輯較為復雜的 API 如：createSelectorQuery 以及 createIntersectionObserver，也在C++側進(jìn)行了重新的實(shí)現，大幅提升了執行性能。

此外C-API 版本支持大部分常見(jiàn)的 CSS 能力：

支持常見(jiàn)的 CSS 樣式和布局，支持 flex、偽類(lèi)和偽元素

支持常見(jiàn)的 CSS 定位，絕對定位、fixed 定位

支持常見(jiàn)的 CSS 選擇器和媒體查詢(xún)

支持常見(jiàn)的 CSS 單位，比如 vh、vw 以及計算屬性 calc

支持 CSS 變量以及安全區域等預定義變量

同時(shí)，在參考瀏覽器 CSSOM 的實(shí)現方式基礎上，在C++實(shí)現了一套 CSSOM 邏輯，里面包含了樣式解析、樣式匹配、樣式合成和應用整個(gè)鏈路的樣式處理邏輯。

圖：Taro on HarmonyOS CSS

另外，Taro 引入了 Yoga 布局引擎來(lái)計算渲染節點(diǎn)的位置和大小，最大程度保證 Taro 構建出來(lái)的鴻蒙應用中渲染樣式和 W3C 規范的一致性。

圖：Taro on HarmonyOS Style

（2）媲美 ArkTS 的高性能

在 C-API 的版本中，ArkVM 層的 Taro 運行時(shí)內容已削減到非常薄，將 TaroElement 的大部分內容都下沉到了 C++ 側，并在 ArkVM 層取消了他們之間父子關(guān)系的綁定，極大地提升了 TaroElement 相關(guān)邏輯的性能。

圖：Taro on HarmonyOS CAPI

另一方面，在 C++ 側 Taro 會(huì )指令式地調用 ArkUI 在 C++ 側提供的 API，來(lái)高效地創(chuàng )建節點(diǎn)、設置屬性、綁定事件以及繪制上屏。

Taro 還針對長(cháng)列表場(chǎng)景針對性地提供了長(cháng)列表類(lèi)型組件，并對長(cháng)列表類(lèi)型組件進(jìn)行了優(yōu)化，提供了懶加載、預加載和節點(diǎn)復用等功能，有效地解決大數據量下的性能問(wèn)題，提高應用的流暢度和用戶(hù)體驗。

圖：Taro on HarmonyOS Virtual List

（3）支持 C-API 的渲染模式

Taro 的組件和 API 是以小程序作為基準來(lái)進(jìn)行設計的，因此在實(shí)際的鴻蒙應用開(kāi)發(fā)過(guò)程中，會(huì )出現部分所需的組件和 API 在 Taro 中不存在的情況，因為針對這種情況，在 C-API 版本中，Taro 支持將初始頁(yè)面或者組件混合編譯到 Taro 鴻蒙項目中，支持 Taro 組件和鴻蒙組件在頁(yè)面上的混合使用。

圖：Taro on HarmonyOS CAPI Hybrid

使用指南

Taro on HarmonyOS技術(shù)方案已開(kāi)源至Github，開(kāi)發(fā)者可搜索“taro”以獲取更多信息：

使用前，開(kāi)發(fā)者可先安裝Harmony插件

添加插件配置

編譯項目

如果需要編譯鴻蒙應用，同時(shí)使用編譯鴻蒙組件，可以在頁(yè)面配置中添加 entryOption: false  表示該頁(yè)面是組件，同時(shí)可以用過(guò) componentName 指定組件導出名。

Taro on HarmonyOS C-API 版本經(jīng)歷了京東鴻蒙 APP 的實(shí)踐，從綜合性能、生態(tài)以及開(kāi)發(fā)體驗都更上一層樓。未來(lái)，京東團隊還會(huì )基于當前的 Taro on HarmonyOS C-API 方案，進(jìn)行多線(xiàn)程的架構升級以及 React 的 C++ 化，進(jìn)一步提升 Taro 在鴻蒙端側的性能，并極大地降低應用的丟幀率。歡迎廣大開(kāi)發(fā)者一起參與 Taro on HarmonyOS 的共建，推動(dòng) Taro 更好發(fā)展。

華為在未來(lái)也將持續攜手生態(tài)伙伴共建創(chuàng )新，面向底座技術(shù)、通用能力、垂類(lèi)行業(yè)等場(chǎng)景推出系列開(kāi)發(fā)者場(chǎng)景化解決方案，不斷提升鴻蒙應用的創(chuàng )新體驗和開(kāi)發(fā)效率，與廣大開(kāi)發(fā)者共建繁榮的鴻蒙生態(tài)。