作者：京東零售 朱天健

基于 Taro 打造的京東鴻蒙 APP 已跟隨鴻蒙 Next 系統(tǒng)公測，本系列文章將深入解析 Taro 如何實現(xiàn)使用 React 開發(fā)高性能鴻蒙應用的技術(shù)內(nèi)幕

背景

在鴻蒙生態(tài)系統(tǒng)中，雖然原生應用通?；?ArkTS 實現(xiàn)，但在實際研發(fā)過程中發(fā)現(xiàn)，使用 C++ 可以顯著提升應用框架和業(yè)務的性能表現(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ū)動應用、頁面和各模塊組件的生命周期，還因為 ArkTS 和業(yè)務代碼（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)邏輯可能會導致性能嚴重劣化，甚至阻塞主線程。這不僅會影響應用的響應速度，更有甚者可能對整體用戶體驗產(chǎn)生負面影響。

為了解決這些問題，提升性能以保證用戶體驗成為關(guān)鍵目標。通過將事件處理邏輯下沉到 C++ 層，并置于后臺線程執(zhí)行等優(yōu)化手段。能夠有效提高代碼執(zhí)行效率，同時避免邏輯阻塞主線程導致的延遲響應，以提升應用的流暢性，提供更佳的用戶體驗。

構(gòu)建多語言環(huán)境下的事件系統(tǒng)

在構(gòu)建多語言環(huán)境下的事件系統(tǒng)時，首要考慮各種類型的事件，比如：鴻蒙提供的組件通用事件、手勢等。事件系統(tǒng)需要有效地管理這些不同的事件來源，并根據(jù)框架和用戶的監(jiān)聽行為有序進行事件的分發(fā)。

在這些事件類型中，大致可以分為普通事件和節(jié)點事件兩類。前者涵蓋系統(tǒng)層面和應用、組件等生命周期的變化，通常由系統(tǒng)或應用狀態(tài)的改變觸發(fā)，主要由事件中心（eventCenter）來處理；節(jié)點事件則與 DOM Tree 緊密相關(guān)，這些事件通常需要快速響應，以確保用戶界面的流暢性和交互的即時性。

事件中心（eventCenter）的實現(xiàn)

作為 Taro 運行時中的基礎(chǔ)模塊，事件中心專注于處理系統(tǒng)事件和生命周期。它允許框架和應用開發(fā)者在后臺線程注冊事件隊列，并異步分發(fā)事件，從而有效減輕主線程的負擔。事件中心能夠快速響應各種事件，同時具備健壯的錯誤處理機制，幫助開發(fā)者快速定位和解決事件回調(diào)中的問題，從而提升開發(fā)效率和系統(tǒng)穩(wěn)定性。

事件監(jiān)聽與分發(fā)

開發(fā)者可以在 C++ 和 ArkTS 等多種語言環(huán)境中創(chuàng)建事件監(jiān)聽器，并將相應的回調(diào)函數(shù)添加到事件隊列中。這一機制允許開發(fā)者在不同的編程語言中靈活地定義和處理事件響應邏輯。

當事件觸發(fā)時，會根據(jù)不同語言環(huán)境的運行時差異，將事件參數(shù)轉(zhuǎn)換為對應的格式。這種參數(shù)轉(zhuǎn)換確保了各語言環(huán)境能夠正確理解并處理事件及包含的數(shù)據(jù)，無論是簡單的數(shù)據(jù)類型還是復雜的對象結(jié)構(gòu)，都能在不同語言之間無縫傳遞。

事件隊列會根據(jù)監(jiān)聽器的類型，按照預定義的順序，將事件分發(fā)到相應的語言環(huán)境中。這樣一來，每個監(jiān)聽器都能在其所屬的環(huán)境中高效地執(zhí)行對應的回調(diào)函數(shù)。通過這種方式，不僅可以實現(xiàn)了跨語言的事件處理，優(yōu)化事件的分發(fā)效率，并確保應用在響應用戶交互時保持高性能和高穩(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é)點會從相應的事件源設(shè)置Receiver（事件接收器）來進行監(jiān)聽并處理回調(diào)邏輯。

鴻蒙事件和鴻蒙手勢事件分別通過RenderNode注冊到Receiver，確保事件能夠正確地傳遞和觸發(fā)。而自定義事件則根據(jù)節(jié)點實現(xiàn)或用戶自行觸發(fā)，以滿足各種不同類型的交互響應。

事件傳播

當TaroElement上的事件被觸發(fā)后，事件會沿著節(jié)點樹向上傳播。每個節(jié)點依次接收到事件，并執(zhí)行相應的回調(diào)。執(zhí)行完回調(diào)后，會檢查開發(fā)者是否阻止冒泡，以決定是否繼續(xù)向上傳播。事件從目標節(jié)點開始，逐級往上直到根節(jié)點或者冒泡被阻止。

這允許開發(fā)者在事件傳播過程中，通過任意節(jié)點處理或攔截事件來調(diào)整業(yè)務邏輯實現(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 標準將相應的節(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)境傳遞時的一致性尤為重要，各個模塊以及應用內(nèi)不同頁面或組件通過事件解耦驅(qū)動來提升可維護性。當前的解決方案有效提升了系統(tǒng)的響應速度和模塊間的協(xié)作能力。

當下方案實現(xiàn)中仍然存在一些問題，比如早期通過事件繞過 ArkTS 與 JS 之間相互調(diào)用限制等場景，可以通過 TurboModule 來提供更加直接的調(diào)用方案。

未來，在 Taro for Harmony 場景下，各語言模塊的協(xié)同將進一步增強。基于事件系統(tǒng)的設(shè)計，可以有效地解耦模塊間邏輯，實現(xiàn)更靈活的組合。

審核編輯 黃宇