作者：京东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，谢谢你的支撑和孝敬。
关注小姐姐的民众号，到场手艺交流群。
