作者:京東零售 朱天健
基于 Taro 打造的京東鴻蒙 APP 已跟隨鴻蒙 Next 系統(tǒng)公測,本系列文章將深入解析 Taro 如何實現(xiàn)使用 React 開發(fā)高性能鴻蒙應(yīng)用的技術(shù)內(nèi)幕
背景
在鴻蒙生態(tài)系統(tǒng)中,雖然原生應(yīng)用通常基于 ArkTS 實現(xiàn),但在實際研發(fā)過程中發(fā)現(xiàn),使用 C++ 可以顯著提升應(yīng)用框架和業(yè)務(wù)的性能表現(xiàn)。隨著鴻蒙系統(tǒng)的不斷迭代升級,不同語言環(huán)境間的協(xié)作已成為不可或缺的開發(fā)范式,共同構(gòu)建了更豐富的研發(fā)生態(tài)。
Taro 通過接入鴻蒙端的 C-API 相關(guān)能力,將組件、樣式布局等運行時邏輯下沉到 C++ 層,從而極大地提升了頁面的渲染性能。
在這樣的背景下,構(gòu)建一套在 C++、ArkTS 等不同語言環(huán)境之間高效通信的事件系統(tǒng),成為了一個極具價值,對于 Taro 來說也是必修的課題。
多語言環(huán)境的事件處理機制
在 Harmony 端的適配過程中,事件系統(tǒng)扮演著雙重角色:不僅驅(qū)動應(yīng)用、頁面和各模塊組件的生命周期,還因為 ArkTS 和業(yè)務(wù)代碼(JS)之間存在人為設(shè)定的界限,需要事件作為橋梁,以便 JS 能夠調(diào)用 ArkTS 的原生能力。
跨語言環(huán)境事件驅(qū)動架構(gòu)的設(shè)計考量
在設(shè)計跨語言環(huán)境的事件驅(qū)動架構(gòu)時,需要同時考慮 ArkTS、JS 和 C++ 等多個語言環(huán)境的限制和運行時差異。如何實現(xiàn)事件在這些環(huán)境之間的有序傳遞,以驅(qū)動頁面和組件的生命周期,是事件系統(tǒng)設(shè)計的重要考量。
通過 C++ 實現(xiàn)事件的底層邏輯,構(gòu)建一個高效的事件管理系統(tǒng),可以有效避免冗余接口的設(shè)計。同時,與鴻蒙的 C-API 支持的事件系統(tǒng)對接,將各類事件分發(fā)到不同語言環(huán)境,確??缯Z言環(huán)境的事件分發(fā)與處理的有序性、高效性。
回顧 Taro 開始適配鴻蒙至今,事件系統(tǒng)也隨之經(jīng)歷了從簡單到完善的演進歷程。從最初在 ArkTS 方案中的基礎(chǔ)實現(xiàn),到隨著 Taro for Harmony 方案迭代發(fā)展,事件系統(tǒng)的設(shè)計也面臨 ArkTS 帶來的一些限制。
在 ArkTS 語言環(huán)境中事件架構(gòu)的局限性
基于 ArkTS 語言環(huán)境實現(xiàn)的事件架構(gòu),在性能方面存在較大局限性。特別是在事件冒泡過程中,性能較差的語法,和回調(diào)邏輯可能會導致性能嚴重劣化,甚至阻塞主線程。這不僅會影響應(yīng)用的響應(yīng)速度,更有甚者可能對整體用戶體驗產(chǎn)生負面影響。
為了解決這些問題,提升性能以保證用戶體驗成為關(guān)鍵目標。通過將事件處理邏輯下沉到 C++ 層,并置于后臺線程執(zhí)行等優(yōu)化手段。能夠有效提高代碼執(zhí)行效率,同時避免邏輯阻塞主線程導致的延遲響應(yīng),以提升應(yīng)用的流暢性,提供更佳的用戶體驗。
構(gòu)建多語言環(huán)境下的事件系統(tǒng)
在構(gòu)建多語言環(huán)境下的事件系統(tǒng)時,首要考慮各種類型的事件,比如:鴻蒙提供的組件通用事件、手勢等。事件系統(tǒng)需要有效地管理這些不同的事件來源,并根據(jù)框架和用戶的監(jiān)聽行為有序進行事件的分發(fā)。
在這些事件類型中,大致可以分為普通事件和節(jié)點事件兩類。前者涵蓋系統(tǒng)層面和應(yīng)用、組件等生命周期的變化,通常由系統(tǒng)或應(yīng)用狀態(tài)的改變觸發(fā),主要由事件中心(eventCenter)來處理;節(jié)點事件則與 DOM Tree 緊密相關(guān),這些事件通常需要快速響應(yīng),以確保用戶界面的流暢性和交互的即時性。
事件中心(eventCenter)的實現(xiàn)
作為 Taro 運行時中的基礎(chǔ)模塊,事件中心專注于處理系統(tǒng)事件和生命周期。它允許框架和應(yīng)用開發(fā)者在后臺線程注冊事件隊列,并異步分發(fā)事件,從而有效減輕主線程的負擔。事件中心能夠快速響應(yīng)各種事件,同時具備健壯的錯誤處理機制,幫助開發(fā)者快速定位和解決事件回調(diào)中的問題,從而提升開發(fā)效率和系統(tǒng)穩(wěn)定性。
事件監(jiān)聽與分發(fā)
開發(fā)者可以在 C++ 和 ArkTS 等多種語言環(huán)境中創(chuàng)建事件監(jiān)聽器,并將相應(yīng)的回調(diào)函數(shù)添加到事件隊列中。這一機制允許開發(fā)者在不同的編程語言中靈活地定義和處理事件響應(yīng)邏輯。
當事件觸發(fā)時,會根據(jù)不同語言環(huán)境的運行時差異,將事件參數(shù)轉(zhuǎn)換為對應(yīng)的格式。這種參數(shù)轉(zhuǎn)換確保了各語言環(huán)境能夠正確理解并處理事件及包含的數(shù)據(jù),無論是簡單的數(shù)據(jù)類型還是復(fù)雜的對象結(jié)構(gòu),都能在不同語言之間無縫傳遞。
事件隊列會根據(jù)監(jiān)聽器的類型,按照預(yù)定義的順序,將事件分發(fā)到相應(yīng)的語言環(huán)境中。這樣一來,每個監(jiān)聽器都能在其所屬的環(huán)境中高效地執(zhí)行對應(yīng)的回調(diào)函數(shù)。通過這種方式,不僅可以實現(xiàn)了跨語言的事件處理,優(yōu)化事件的分發(fā)效率,并確保應(yīng)用在響應(yīng)用戶交互時保持高性能和高穩(wěn)定性。
需要注意的是,受限于底層限制,在 ArkTS 環(huán)境中注冊的事件需要回到主線程執(zhí)行,同時在鴻蒙端不支持 Symbol 類型的事件。
節(jié)點事件處理(domEvent)
在 HTML 中,節(jié)點事件處理流程會如下圖所示,事件從根節(jié)點開始向下傳播至目標節(jié)點,觸發(fā)后再從目標節(jié)點順著節(jié)點樹向上冒泡。在鴻蒙端實現(xiàn)中,Taro 基于這一事件傳播流程,為開發(fā)者提供一致的事件處理機制。
事件類型
在 Taro 框架中,節(jié)點主要處理三種類型的事件:鴻蒙事件、鴻蒙手勢事件和自定義事件。這些事件都是從TaroElement上進行監(jiān)聽和觸發(fā)的。根據(jù)事件的類型不同,節(jié)點會從相應(yīng)的事件源設(shè)置Receiver(事件接收器)來進行監(jiān)聽并處理回調(diào)邏輯。
鴻蒙事件和鴻蒙手勢事件分別通過RenderNode注冊到Receiver,確保事件能夠正確地傳遞和觸發(fā)。而自定義事件則根據(jù)節(jié)點實現(xiàn)或用戶自行觸發(fā),以滿足各種不同類型的交互響應(yīng)。
事件傳播
當TaroElement上的事件被觸發(fā)后,事件會沿著節(jié)點樹向上傳播。每個節(jié)點依次接收到事件,并執(zhí)行相應(yīng)的回調(diào)。執(zhí)行完回調(diào)后,會檢查開發(fā)者是否阻止冒泡,以決定是否繼續(xù)向上傳播。事件從目標節(jié)點開始,逐級往上直到根節(jié)點或者冒泡被阻止。
這允許開發(fā)者在事件傳播過程中,通過任意節(jié)點處理或攔截事件來調(diào)整業(yè)務(wù)邏輯實現(xiàn),以更靈活的方式在特定節(jié)點上執(zhí)行邏輯,或通過阻止冒泡避免對上層節(jié)點的影響。這樣的設(shè)計對于前端開發(fā)者來說,更加熟悉、直觀。
鴻蒙系統(tǒng)的底層節(jié)點事件也有自己的傳播邏輯,但由于其機制與 ArkNode 節(jié)點樹差異,為避免其事件干擾,需要阻止其冒泡行為并接管其傳播流程,以確保事件傳播與節(jié)點樹正確關(guān)聯(lián)。
事件回調(diào)
由于節(jié)點事件也需要回調(diào) JS 環(huán)境中執(zhí)行,根據(jù)事件類型的不同,按照 Web 標準將相應(yīng)的節(jié)點、值和方法如 target、stopPropagation、value 等等掛載到事件對象上。通過執(zhí)行當前回調(diào)的序列化方法,確保事件在不同語言環(huán)境傳遞時,可以保證其回調(diào)對象能力一致、參數(shù)完整。
在 C++ 中,許多組件依賴于事件機制來實現(xiàn)功能。例如,通過鴻蒙事件更新組件屬性,還有各個組件節(jié)點間的事件傳遞等。這些組件利用事件機制來確保數(shù)據(jù)變化能夠及時反映,并且用戶交互能夠順利傳遞到系統(tǒng)的各個部分。
總結(jié)與展望
在多語言環(huán)境中,確保事件在不同語言環(huán)境傳遞時的一致性尤為重要,各個模塊以及應(yīng)用內(nèi)不同頁面或組件通過事件解耦驅(qū)動來提升可維護性。當前的解決方案有效提升了系統(tǒng)的響應(yīng)速度和模塊間的協(xié)作能力。
當下方案實現(xiàn)中仍然存在一些問題,比如早期通過事件繞過 ArkTS 與 JS 之間相互調(diào)用限制等場景,可以通過 TurboModule 來提供更加直接的調(diào)用方案。
未來,在 Taro for Harmony 場景下,各語言模塊的協(xié)同將進一步增強?;谑录到y(tǒng)的設(shè)計,可以有效地解耦模塊間邏輯,實現(xiàn)更靈活的組合。
審核編輯 黃宇
-
系統(tǒng)設(shè)計
+關(guān)注
關(guān)注
0文章
154瀏覽量
21610 -
鴻蒙
+關(guān)注
關(guān)注
57文章
2352瀏覽量
42863
發(fā)布評論請先 登錄
相關(guān)推薦
評論