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

作者：京東ARES多端技術(shù)團(tuán)隊(duì)

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

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

React Native

微信小程序

完備的React語(yǔ)法支持

Alita的設(shè)計(jì)目標(biāo)是要盡可能無(wú)損的轉(zhuǎn)換RN應(yīng)用，即使是已經(jīng)存在的RN應(yīng)用，我們也希望只做少量的修改就可以在微信小程序平臺(tái)運(yùn)行，所以這就要求Alita必須對(duì)React語(yǔ)法有足夠的支持，包括 JSX 語(yǔ)法，React生命周期等

JSX語(yǔ)法

Alita 支持大部分 JSX 語(yǔ)法，這意味著什么呢？意味著你可以使用React自由的代碼方式以及強(qiáng)大的組件化支持，意味著你可以延用自己的編程習(xí)慣，不需要對(duì)已有的RN代碼進(jìn)行過(guò)多修改。這主要得益于 Alita 是在運(yùn)行時(shí)處理 JSX語(yǔ)法，而不是現(xiàn)在社區(qū)上常見的編譯時(shí)處理。

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

JSX 只允許出現(xiàn)的組件的 render 方法中

不能通過(guò) props 傳遞 JSX 片段或者返回 JSX 的函數(shù)

不支持在屬性上傳遞函數(shù)

Alita 轉(zhuǎn)換以下代碼毫無(wú)壓力：

生命周期

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

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

RN基本組件和API

RN 提供了很多基本的組件和 API，這些組件加上 React 開發(fā)方式，共同構(gòu)成了 RN 應(yīng)用。Alita 除了要對(duì) React 語(yǔ)法進(jìn)行處理，還必須在預(yù)先在微信小程序平臺(tái)對(duì)齊出一套與 RN 等效的組件和 API。比如在 RN 端，請(qǐng)求網(wǎng)絡(luò)的方式是通過(guò) fetch 方式，但是微信小程序本身并不存在 fetch 方法，就這要求 Alita 必須基于微信小程序的網(wǎng)絡(luò) API，在微信小程序上實(shí)現(xiàn)一個(gè) fetch 方法。 同樣的以 RN 組件 FlatList 為例，當(dāng) Alita 把 RN 應(yīng)用轉(zhuǎn)化為微信小程序代碼之后，FlatList 在微信小程序平臺(tái)并不存在，需要預(yù)先在微信小程序平臺(tái)實(shí)現(xiàn)小程序版本的 FlatList 。這個(gè)預(yù)先處理的過(guò)程，我們稱之為對(duì)齊，對(duì)齊的過(guò)程包括組件，組件屬性，API 等。

Redux

Redux 是 JavaScript 狀態(tài)容器，提供可預(yù)測(cè)化的狀態(tài)管理，并且易于測(cè)試，是當(dāng)前 React 技術(shù)棧流行的數(shù)據(jù)層管理方案。得益于 Alita 運(yùn)行階段處理 React 邏輯的設(shè)計(jì)，Alita 支持將使用Redux的RN應(yīng)用轉(zhuǎn)換成微信小程序。

動(dòng)畫

動(dòng)畫是每一個(gè) app 不可或缺的能力，RN 和微信小程序的動(dòng)畫實(shí)現(xiàn)差異很大，RN 的動(dòng)畫能力要強(qiáng)于微信小程序，想要完全把 RN 的動(dòng)畫轉(zhuǎn)化至微信小程序的是不可能的。為此我們封裝了一套動(dòng)畫組件庫(kù)，這一套動(dòng)畫組件庫(kù)涵蓋了所有微信小程序的動(dòng)畫能力，所有使用此動(dòng)畫庫(kù)開發(fā)的動(dòng)畫，都可以無(wú)損轉(zhuǎn)化到小程序端。

那么 Alita 是如何將 RN 轉(zhuǎn)換運(yùn)行在微信小程序上的呢？我們不打算在這篇文章深入剖析，簡(jiǎn)單從編譯階段和運(yùn)行階段來(lái)說(shuō)明。

編譯階段：我們通過(guò)靜態(tài)分析RN源碼，將其轉(zhuǎn)換為微信小程序可以識(shí)別的代碼，首先我們會(huì)將 JSX 語(yǔ)法轉(zhuǎn)換為微信小程序的wxml模塊語(yǔ)法，RN組件在這個(gè)階段會(huì)被轉(zhuǎn)換為微信小程序自定義組件，一般會(huì)產(chǎn)生微信小程序需要的4個(gè)文件 wxml， js，json 和 wxss。 此外，我們會(huì)保留一份babel轉(zhuǎn)譯之后的RN源碼，這份代碼里面所有的 JSX 都已經(jīng)由 React.createElement 替換，運(yùn)行階段，會(huì)使用這個(gè)能被微信小程序的 JavaScript 運(yùn)行環(huán)境識(shí)別的源碼。

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

在項(xiàng)目開發(fā)中，僅僅使用RN基本組件和API，是很難滿足需要的。我們?cè)谑褂肁lita的過(guò)程中，積累了很多常用的三端組件，包括ScrollTabView，ViewPager，SegmentedControl等等，我們正在剝離和梳理這些組件，很快會(huì)發(fā)布兼容三端的 Alita 組件庫(kù)。此組件庫(kù)也是我們?nèi)蘸蟮墓ぷ髦攸c(diǎn)之一，我們將會(huì)不斷優(yōu)化和擴(kuò)展新組件。

除了 Alita 組件庫(kù)，我們還提供了擴(kuò)展方式，開發(fā)者可以很方便的把本團(tuán)隊(duì)的基本 UI 組件庫(kù)擴(kuò)展到微信小程序端，然后通過(guò) Alita 把使用了這些組件的 RN 應(yīng)用運(yùn)行在微信小程序平臺(tái)。

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

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

我們十分重視開源社區(qū)的反饋和建議，會(huì)不斷從中汲取養(yǎng)分，讓 Alita 變得更加強(qiáng)大。

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

關(guān)注小姐姐的公眾號(hào)，加入技術(shù)交流群。