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

圖：京東鴻蒙版應(yīng)用

整體技術(shù)架構(gòu)

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

圖：Taro on HarmonyOS React

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

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

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

圖：Taro on HarmonyOS React DOM

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

重點(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，針對(duì)邏輯較為復(fù)雜的 API 如：createSelectorQuery 以及 createIntersectionObserver，也在C++側(cè)進(jìn)行了重新的實(shí)現(xiàn)，大幅提升了執(zhí)行性能。

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

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

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

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

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

支持 CSS 變量以及安全區(qū)域等預(yù)定義變量

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

圖：Taro on HarmonyOS CSS

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

圖：Taro on HarmonyOS Style

（2）媲美 ArkTS 的高性能

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

圖：Taro on HarmonyOS CAPI

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

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

圖：Taro on HarmonyOS Virtual List

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

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

圖：Taro on HarmonyOS CAPI Hybrid

使用指南

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

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

添加插件配置

編譯項(xiàng)目

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

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

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