周淑慧

隨著鴻蒙操作系統(tǒng)（HarmonyOS）的快速演進和生態(tài)版圖的持續(xù)擴張，越來越多的企業(yè)與開發(fā)者開始將目光投向這一極具商業(yè)潛力與價值的平臺。同時，眾多開發(fā)者和企業(yè)積極參與開源共建，共同推動鴻蒙生態(tài)底層技術(shù)與開發(fā)能力的創(chuàng)新。在近期舉行的華為開發(fā)者大會上，華為透露，僅半年多以來，已有30多家生態(tài)伙伴參與其中，共建的能力超過50項，涵蓋框架、媒體、工具、安全等多個關(guān)鍵技術(shù)領(lǐng)域。

近日，京東團隊正式開源的TaroonHarmonyOSC-API版本，就是鴻蒙生態(tài)伙伴協(xié)同創(chuàng)新模式下的一個碩果。Taro框架的鴻蒙化旨在為廣大熟悉Web技術(shù)的開發(fā)者，提供一座通往高性能鴻蒙應(yīng)用開發(fā)的堅實橋梁。

一、在跨端便利性與原生性能間尋求極致平衡

長期以來，跨平臺開發(fā)框架始終在“開發(fā)效率”與“出色性能”的天平兩端艱難搖擺。為了實現(xiàn)“一次編寫，多端運行”，許多方案不得不引入額外的抽象層或JSBridge，這往往以犧牲部分性能和體驗為代價。

TaroonHarmonyOS的C-API方案，便是為了解決鴻蒙應(yīng)用跨端開發(fā)中的這項挑戰(zhàn)。它通過徹底的架構(gòu)革新，力求打破傳統(tǒng)桎梏，讓開發(fā)者使用React技術(shù)棧，構(gòu)建出發(fā)揮鴻蒙設(shè)備性能潛力的高質(zhì)量應(yīng)用。

二、架構(gòu)解析：三層分離的性能優(yōu)化之道

TaroonHarmonyOSC-API版本的高性能并非偶然，其根源在于京東工程師們設(shè)計的精巧分層架構(gòu)。該架構(gòu)將應(yīng)用運行時清晰地解耦為三個層次，各司其職，高效協(xié)同，從根本上優(yōu)化了渲染鏈路。

1、上層（ArkVM層）：輕量化的業(yè)務(wù)邏輯層

這是開發(fā)者直接接觸的層面，主要承載應(yīng)用的業(yè)務(wù)邏輯和React核心庫的運行。京東團隊在此方案中的一個關(guān)鍵決策，便是將這一層“極致輕量化”。通過將絕大部分與UI渲染、節(jié)點管理相關(guān)的重度操作下沉至C++層，ArkVM得以從繁重的渲染任務(wù)中解放出來，更專注于高效執(zhí)行業(yè)務(wù)代碼，從而顯著降低了JavaScript引擎的負載。

2、中間層（TaroDOM&CSSOM）：C++實現(xiàn)的渲染橋梁

這一層是連接上層指令與底層原生實現(xiàn)的核心樞紐。京東團隊在C++環(huán)境中，從零到一構(gòu)建了一套完整的文檔對象模型（CSSOM）和Taro元素樹（TaroElement）。當(dāng)上層React代碼發(fā)出界面更新的指令時（如創(chuàng)建節(jié)點、設(shè)置屬性），這些指令被傳遞到中間層，由高性能的C++代碼進行解析和處理。這一設(shè)計巧妙地繞開了傳統(tǒng)跨端方案中開銷巨大的JSBridge，將耗時的DOM操作全部收斂在原生側(cè)，是性能提升的關(guān)鍵所在。

3、底層（TaroRenderNode&Yoga）：直通原生的最終渲染層

這是與鴻蒙系統(tǒng)UI能力直接對話的最后一環(huán)。它維護著一棵與屏幕真實UI節(jié)點一一對應(yīng)的虛擬節(jié)點樹（TaroRenderNode）。為了實現(xiàn)與Web標(biāo)準(zhǔn)高度一致的復(fù)雜布局，方案明智地集成了業(yè)界公認(rèn)的、高性能的Yoga布局引擎。所有節(jié)點的尺寸和位置計算，均在C++側(cè)完成。隨后，通過鴻蒙系統(tǒng)提供的C-API，以指令式的方式直接調(diào)用原生接口，高效地完成節(jié)點的創(chuàng)建、屬性設(shè)置、事件綁定與最終繪制。這條渲染路徑極為短促，幾乎沒有多余的性能損耗。

更值得稱道的是，整個架構(gòu)還深度整合了鴻蒙的VSync（垂直同步）機制，建立了一套嚴(yán)謹(jǐn)?shù)娜蝿?wù)處理管線。它確保了從樣式解析、布局計算到屏幕渲染的每一步都能精準(zhǔn)、有序地執(zhí)行，從而有效避免了UI卡頓和畫面撕裂，保障了最終的用戶體驗。

三、關(guān)鍵特性：京東團隊為鴻蒙開發(fā)者獻上的“三板斧”

除了卓越的底層架構(gòu)，該方案在功能完備性、性能優(yōu)化策略和開發(fā)靈活性方面，也為開發(fā)者提供了堅實可靠的支持。

1.豐富且對標(biāo)Web標(biāo)準(zhǔn)的能力支持

對于龐大的前端開發(fā)者群體而言，技術(shù)棧的平滑遷移至關(guān)重要。TaroC-API版本在這方面表現(xiàn)出色：

全面的組件與API覆蓋：支持React18+，并提供了近33個常用核心組件（如View、Text、Image）和大量常用API（如getSystemInfo）。特別地，于createSelectorQuery這類復(fù)雜的API，方案在C++側(cè)進行了重構(gòu)，大幅提升了查詢性能。

強大的CSS兼容性：它支持絕大部分前端開發(fā)者所熟悉的CSS能力，包括Flexbox布局、position定位、偽類與偽元素、vh/vw等響應(yīng)式單位、calc計算屬性，乃至CSS變量。這背后是其強大的C++CSSOM引擎在支撐，讓開發(fā)者幾乎可以“零成本”復(fù)用現(xiàn)有的Web樣式代碼和布局經(jīng)驗。

2.媲美ArkTS的高性能實踐

性能是檢驗跨平臺框架的試金石。該方案通過多種工程手段，將性能優(yōu)化做到了極致：

邏輯下沉與指令調(diào)用：如前所述，將大量運行時邏輯從JS下沉至C++，并通過指令式調(diào)用ArkUI的C-API，極大減少了跨語言通信的消耗。

長列表專項優(yōu)化：針對長列表、信息流等大數(shù)據(jù)量場景，方案內(nèi)置了虛擬列表組件，并集成了懶加載、預(yù)加載和節(jié)點復(fù)用等高級優(yōu)化策略，有效避免了因一次性渲染大量節(jié)點而導(dǎo)致的卡頓，保障了滾動的流暢性。

3.務(wù)實而靈活的混合編譯模式

任何框架都無法預(yù)見所有開發(fā)場景。當(dāng)Taro提供的組件或API無法滿足特定需求時怎么辦？該方案提供了一種極為靈活的“混合編譯”模式。開發(fā)者可以將原生的鴻蒙組件無縫集成到Taro項目中，實現(xiàn)Taro組件與鴻蒙組件在同一頁面上的混合渲染和交互。這種設(shè)計極具務(wù)實精神，它允許團隊根據(jù)項目需求漸進式地采用Taro，或在新舊項目遷移中平滑過渡，避免了技術(shù)選型的“一刀切”。

據(jù)悉，京東團隊未來還將在此基礎(chǔ)上進行多線程架構(gòu)升級及React的C++化探索，目標(biāo)是進一步壓榨性能潛力，極大地降低應(yīng)用丟幀率。

四、快速上手：開啟你的鴻蒙跨端開發(fā)之旅

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

整個接入流程被設(shè)計得相當(dāng)順暢：

環(huán)境準(zhǔn)備：開發(fā)者需要在其DevEcoStudioIDE中安裝相應(yīng)的HarmonyOS插件，這是構(gòu)建鴻蒙應(yīng)用的基礎(chǔ)。

項目配置：接著，在Taro項目的配置文件中，添加針對鴻蒙平臺的特定插件配置。

3、編譯運行：完成配置后，只需執(zhí)行標(biāo)準(zhǔn)的Taro編譯命令，即可將項目構(gòu)建為鴻蒙應(yīng)用。

值得一提的是，該框架的靈活性也體現(xiàn)在配置層面。例如，在實踐前文提到的“混合編譯”模式時，開發(fā)者只需在頁面或組件的配置文件中添加entryOption:false，即可將其標(biāo)識為一個可供原生鴻蒙調(diào)用的組件，并通過componentName屬性指定其導(dǎo)出的組件名，整個過程直觀且高效。

結(jié)語

總而言之，TaroonHarmonyOSC-API版本不僅為鴻蒙開發(fā)者社區(qū)貢獻了一個強大而高效的跨平臺框架，更重要的是，它展示了一條通過技術(shù)創(chuàng)新來融合不同技術(shù)生態(tài)、實現(xiàn)共贏發(fā)展的可行路徑。隨著鴻蒙生態(tài)的持續(xù)建設(shè)，我們有理由相信，未來將會有更多類似的高質(zhì)量解決方案涌現(xiàn)，共同推動一個更加繁榮、多元的開發(fā)者新時代的到來。

甜蜜的劉若英,苦澀的奶茶:那些不甘寂寞的感情,那些消失的路人...

有一種幸福,叫回家

你說把自己當(dāng)做人質(zhì)交給我,現(xiàn)在,我卻成了你的人質(zhì)