摘要：得益于運行階段處理邏輯的設計，支持將使用的應用轉換成微信小程序。我們也在考察這一新的跨端方案和微信小程序融合轉化的可行性。

作者：京東ARES多端技術團隊

Alita是一套由京東ARES多端技術團隊打造的React Native代碼轉換引擎工具。它對React語法有全新的處理方式，支持在運行時處理React語法，實現了React Native和微信小程序之間的主要組件對齊，可以用簡潔、高效的方式把React Native代碼轉換成微信小程序代碼。

Alita不是新的框架，也沒有提出新的語法規則，她只做一件事，就是把你的React Native代碼運行在微信小程序端。所以Alita的侵入性很低，選用與否，并不會對你的原有React Native開發方式造成太大影響。

React Native

微信小程序

完備的React語法支持

Alita的設計目標是要盡可能無損的轉換RN應用，即使是已經存在的RN應用，我們也希望只做少量的修改就可以在微信小程序平臺運行，所以這就要求Alita必須對React語法有足夠的支持，包括 JSX 語法，React生命周期等

JSX語法

Alita 支持大部分 JSX 語法，這意味著什么呢？意味著你可以使用React自由的代碼方式以及強大的組件化支持，意味著你可以延用自己的編程習慣，不需要對已有的RN代碼進行過多修改。這主要得益于 Alita 是在運行時處理 JSX語法，而不是現在社區上常見的編譯時處理。

因此 Alita 沒有諸如以下社區其他方案的限制：

JSX 只允許出現的組件的 render 方法中

不能通過 props 傳遞 JSX 片段或者返回 JSX 的函數

不支持在屬性上傳遞函數

Alita 轉換以下代碼毫無壓力：

生命周期

Alita 支持所有的 React 生命周期。微信小程序本身給組件提供了生命周期，但是這些生命周期在寫法和調用上與 React 存在著一些的差異，另外 React 生命周期更加豐富。Alita 在支持 React 生命周期的時候，把它們分為了兩類，第一類： componentDidMount，componentDidUpdate，componentWillUnmount 這3個生命周期在微信小程序上有相應的觸發時機，比如ready, detached，只需要在微信小程序相關回調觸發的時候，調用 React 組件對應的方法即可。另外一類，在微信小程序端沒有直接對應的生命周期，對于這一類生命周期，主要是借助于 Alita 內部嵌入的 mini-react，觸發相應的回調。通過這兩種方式，Alita 實現了 React 生命周期的對齊。

此外，Alita 抹平了 RN 和微信小程序之間的事件及樣式差異，能夠無損得將RN事件和樣式傳遞到微信小程序中。

RN基本組件和API

RN 提供了很多基本的組件和 API，這些組件加上 React 開發方式，共同構成了 RN 應用。Alita 除了要對 React 語法進行處理，還必須在預先在微信小程序平臺對齊出一套與 RN 等效的組件和 API。比如在 RN 端，請求網絡的方式是通過 fetch 方式，但是微信小程序本身并不存在 fetch 方法，就這要求 Alita 必須基于微信小程序的網絡 API，在微信小程序上實現一個 fetch 方法。 同樣的以 RN 組件 FlatList 為例，當 Alita 把 RN 應用轉化為微信小程序代碼之后，FlatList 在微信小程序平臺并不存在，需要預先在微信小程序平臺實現小程序版本的 FlatList 。這個預先處理的過程，我們稱之為對齊，對齊的過程包括組件，組件屬性，API 等。

Redux

Redux 是 JavaScript 狀態容器，提供可預測化的狀態管理，并且易于測試，是當前 React 技術棧流行的數據層管理方案。得益于 Alita 運行階段處理 React 邏輯的設計，Alita 支持將使用Redux的RN應用轉換成微信小程序。

動畫

動畫是每一個 app 不可或缺的能力，RN 和微信小程序的動畫實現差異很大，RN 的動畫能力要強于微信小程序，想要完全把 RN 的動畫轉化至微信小程序的是不可能的。為此我們封裝了一套動畫組件庫，這一套動畫組件庫涵蓋了所有微信小程序的動畫能力，所有使用此動畫庫開發的動畫，都可以無損轉化到小程序端。

那么 Alita 是如何將 RN 轉換運行在微信小程序上的呢？我們不打算在這篇文章深入剖析，簡單從編譯階段和運行階段來說明。

編譯階段：我們通過靜態分析RN源碼，將其轉換為微信小程序可以識別的代碼，首先我們會將 JSX 語法轉換為微信小程序的wxml模塊語法，RN組件在這個階段會被轉換為微信小程序自定義組件，一般會產生微信小程序需要的4個文件 wxml， js，json 和 wxss。 此外，我們會保留一份babel轉譯之后的RN源碼，這份代碼里面所有的 JSX 都已經由 React.createElement 替換，運行階段，會使用這個能被微信小程序的 JavaScript 運行環境識別的源碼。

運行階段：Alita 內部嵌入了一個 mini-react，這個 mini-react 在運行階段會運行上文所說的轉譯后的RN源碼，與 React 一樣，遞歸（React Fiber之后，不再是遞給的方式）的處理組件樹，調用組件的 render 方法，調用組件生命周期，計算 context 等。另外 React 在運行的過程中有一個重要的 reconciliation 算法（即virtual-dom），mini-react 同樣提供了簡化版本的 reconciliation 來決定組件的銷毀與復用。mini-react 執行完之后，最終會輸出一個描述視圖的數據結構，這份數據結構提供了微信小程序渲染所需要的所有數據。微信小程序通過橋接模塊與 mini-react 通信，獲取到這一份數據，通過 setData 的方式設置到微信小程序模版上，從而渲染出視圖。

在項目開發中，僅僅使用RN基本組件和API，是很難滿足需要的。我們在使用Alita的過程中，積累了很多常用的三端組件，包括ScrollTabView，ViewPager，SegmentedControl等等，我們正在剝離和梳理這些組件，很快會發布兼容三端的 Alita 組件庫。此組件庫也是我們日后的工作重點之一，我們將會不斷優化和擴展新組件。

除了 Alita 組件庫，我們還提供了擴展方式，開發者可以很方便的把本團隊的基本 UI 組件庫擴展到微信小程序端，然后通過 Alita 把使用了這些組件的 RN 應用運行在微信小程序平臺。

我們將不斷拓展 Alita 的能力，支持更多端能力，如：百度小程序、頭條小程序等，繼續完善開發者體驗，提高開發者效率，幫助更多開發者。

我們也在考察 Flutter 這一新的跨端方案和微信小程序融合轉化的可行性。

我們十分重視開源社區的反饋和建議，會不斷從中汲取養分，讓 Alita 變得更加強大。

如果有任何的意見或者建議，歡迎在 Github 創建 issue，感謝你的支持和貢獻。

關注小姐姐的公眾號，加入技術交流群。