作者：京東ARES多端技術團隊
前言
Alita是一套由京東ARES多端技術團隊打造的React Native程式碼轉換引擎工具。它對React語法有全新的處理方式，支援在執行時處理React語法，實現了React Native和微信小程式之間的主要元件對齊，可以用簡潔、高效的方式把React Native程式碼轉換成微信小程式程式碼。
Alita不是新的框架，也沒有提出新的語法規則，她只做一件事，就是把你的React Native程式碼執行在微信小程式端。所以Alita的侵入性很低，選用與否，並不會對你的原有React Native開發方式造成太大影響。
Alita專案開源地址: https://github.com/areslabs/alita
React Native
微信小程式
Alita 具備哪些能力
完備的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原理簡介
那麼 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 的方式設定到微信小程式模版上，從而渲染出檢視。
Alita元件庫
在專案開發中，僅僅使用RN基本元件和API，是很難滿足需要的。我們在使用Alita的過程中，積累了很多常用的三端元件，包括ScrollTabView，ViewPager，SegmentedControl等等，我們正在剝離和梳理這些元件，很快會發布相容三端的 Alita 元件庫。此元件庫也是我們日後的工作重點之一，我們將會不斷優化和擴充套件新元件。
除了 Alita 元件庫，我們還提供了擴充套件方式，開發者可以很方便的把本團隊的基本 UI 元件庫擴充套件到微信小程式端，然後通過 Alita 把使用了這些元件的 RN 應用執行在微信小程式平臺。
結語
我們將不斷擴充 Alita 的能力，支援更多端能力，如：百度小程式、頭條小程式等，繼續完善開發者體驗，提高開發者效率，幫助更多開發者。
我們也在考察 Flutter 這一新的跨端方案和微信小程式融合轉化的可行性。
我們十分重視開源社群的反饋和建議，會不斷從中汲取養分，讓 Alita 變得更加強大。
意見反饋
如果有任何的意見或者建議，歡迎在 Github 建立 issue，感謝你的支援和貢獻。
關注小姐姐的公眾號，加入技術交流群。
