業內首個 React Native轉微信小程序引擎 Alita 正式發佈

做者：京東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 沒有諸如如下社區其餘方案的限制：

1. JSX 只容許出現的組件的 render 方法中
2. 不能經過 props 傳遞 JSX 片斷或者返回 JSX 的函數
3. 不支持在屬性上傳遞函數

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，感謝你的支持和貢獻。