业内首个 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，感谢你的支持和贡献。