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

圖：京東鴻蒙版應用

1.整體技術架構

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機制設置一套任務處理管線，來處理中間層和下層節點樹產生的樣式匹配、節點測量、節點布局、樣式設置以及節點上屏等任務，來保證任務的時序性和最后上屏渲染結果的正確性。

2.重點特性

在特性方面，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 規范的一致性。

（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

3.使用指南

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 更好發展。

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