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

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

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

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

圖：Taro on HarmonyOS React

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

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

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

圖：Taro on HarmonyOS React DOM

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

2.重點特性

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

（1）豐富的能力支持

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

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

• 支持常見的CSS 樣式和布局，支持 flex、偽類和偽元素
• 支持常見的CSS 定位，絕對定位、fixed 定位
• 支持常見的CSS 選擇器和媒體查詢
• 支持常見的CSS 單位，比如 vh、vw 以及計算屬性 calc
• 支持CSS 變量以及安全區(qū)域等預(yù)定義變量

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

圖：Taro on HarmonyOS CSS

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

（2）媲美 ArkTS 的高性能

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

圖：Taro on HarmonyOS CAPI

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

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

圖：Taro on HarmonyOS Virtual List

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

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

圖：Taro on HarmonyOS CAPI Hybrid

3.使用指南

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

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

圖片

添加插件配置。

圖片

編譯項目。

圖片

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

圖片

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

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