写点什么

重磅开源!业内首个 React Native 转微信小程序引擎

  • 2019-05-29
  • 本文字数:2542 字

    阅读完需:约 8 分钟

重磅开源!业内首个React Native转微信小程序引擎

前言

Alita 是一套由京东 ARES 多端技术团队打造的 React Native 代码转换引擎工具。它对 React 语法有全新的处理方式,支持在运行时处理 React 语法,实现了 React Native 和微信小程序之间的主要组件对齐,可以用简洁、高效的方式把 React Native 代码转换成微信小程序代码。


Alita 不是一个新框架,不会有额外的学习成本,她只是一套转换引擎工具,可以把 React Native 扩展到微信小程序端,大大降低多终端上的业务开发成本。以后移动端开发者只需要掌握 React Native 技术栈,就可以轻松实现 Android、iOS、Windows、Web(已有开源项目支持)、微信小程序等多端渲染。

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 生命周期的时候,把它们分为了两类:


  • 第一类: componentDidMountcomponentDidUpdatecomponentWillUnmount 这 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 的动画转化至微信小程序的是不可能的。为此我们封装了一套动画组件库,这一套动画组件库涵盖了所有微信小程序的动画能力,所有使用此动画库开发的动画,都可以无损转化到小程序端。


React Native 微信小程序

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 的过程中,积累了很多常用的三端组件,包括ScrollTabViewViewPagerSegmentedControl等等,我们正在剥离和梳理这些组件,很快会发布兼容三端的 Alita 组件库。此组件库也是我们日后的工作重点之一,我们将会不断优化和扩展新组件。


除了 Alita 组件库,我们还提供了扩展方式,开发者可以很方便的把本团队的基本 UI 组件库扩展到微信小程序端,然后通过 Alita 把使用了这些组件的 RN 应用运行在微信小程序平台。


结语

我们将不断拓展 Alita 的能力,支持更多端能力,如:百度小程序、头条小程序等,继续完善开发者体验,提高开发者效率,帮助更多开发者。


我们也在考察 Flutter 这一新的跨端方案和微信小程序融合转化的可行性。


我们十分重视开源社区的反馈和建议,会不断从中汲取养分,让 Alita 变得更加强大。

意见反馈

如果有任何的意见或者建议,欢迎在 Github 创建 issue,感谢你的支持和贡献。



2019-05-29 08:0111404

评论 2 条评论

发布
用户头像
Alita 原理简介看出运行时是计算数据props,不太理解如果是 props 有 JSX 片段,怎么处理
2019-05-29 10:57
回复
用户头像
这么酷吗
2019-05-29 08:58
回复
没有更多了
发现更多内容

华为云医疗智能体,助力医疗健康加速智能化

YG科技

mac上好用的效率软件:Alfred 5 激活版

真大的脸盆

Mac Mac 软件 效率软件

从此脱离CRUD!Github热榜第三架构师速成手册成功颠覆了我的认知

Java你猿哥

架构 ssm 架构设计 架构师 微服务实战

阿里技术官神作!大厂亿级流量性能调优学习手册,堪称保姆级教学

做梦都在改BUG

Java 性能优化 性能调优

聊聊 IP packet 的 TTL 与 tcp segment 的 MSL

明哥的IT随笔

TCP/IP TTL MSL

华为云文字识别OCR-助力企业办公智能化不断发展

轶天下事

终于可以彻底告别手写正则表达式了

Java你猿哥

Java ssm 表达式 GPT

一文详解多模态认知智能

华为云开发者联盟

人工智能 华为云 AIGC 华为云开发者联盟 企业号 4 月 PK 榜

人脸活体检测初识

六月的雨在InfoQ

人脸活体检测 三周年连更 人脸数据库 人脸辨识度

区块链基础设施 NFTScan 新增支持 Aptos 网络

NFT Research

区块链+ NFT

华为云智能云接入ICA,让世界距离更近

YG科技

华为云云速建站,助力企业搭建网站省心又省力

YG科技

华为云搜索服务CSS,助力企业挖掘数据价值

轶天下事

裸辞底气!GitHub飙升“java面试笔记2023” 了解下八股文天花板

Java你猿哥

Java 面试 Spring Boot ssm 八股文

华为云CDN助力企业网速腾飞!

轶天下事

逆天!腾讯大神纯手撸“架构师速成手册”Github狂获4.5kstar

Java你猿哥

Java 架构 ssm 架构设计 架构师

HashData认证云原生数据仓库管理工程师培训报名开启!

酷克数据HashData

使用Pinia:让Vue状态管理更简单

格斗家不爱在外太空沉思

Pinia 三周年连更

设计模式的故事之三:责任链模式

Java你猿哥

Java 设计 ssm 责任链模式 责任链

Spring Boot 整合 Redis 基于 Stream 消息队列 实现异步秒杀下单

Java你猿哥

Java redis stream ssm 消息队列

算法题每日一练: 青蛙跳台阶

知心宝贝

数据结构 算法 前端 后端 三周年连更

亿级日活业务稳如磐石,华为云CodeArts PerfTest发布

华为云开发者联盟

云计算 后端 华为云 华为云开发者联盟 企业号 4 月 PK 榜

华为云,用科技开启智慧化生活

轶天下事

为什么选择华为云CDN?这些案例告诉你

轶天下事

openEuler NFS+协议全新发布:实现NAS存储性能与可靠性倍增

openEuler

Linux 操作系统 存储 openEuler

爆肝Java九大核心专题,666页内容,我收割了5个大厂offer

Java你猿哥

Java MySQL JVM 消息队列

阿里限量的性能调优+微服务+高并发设计,真的太香了!

做梦都在改BUG

Java 微服务架构 系统设计 性能调优 亿级并发

运维报表有哪些内容?有什么用?

行云管家

运维 报表 IT运维 容器化部署

与全球开发者创新共赢,全球首个“开发者村” 正式落成

Geek_2d6073

devops|中小公司效率为王,没必要度量

laofo

DevOps 研发效能 工程效率 效能度量 研发效能度量

本铯智能科技是家怎样的共享电动车厂家?

共享电单车厂家

共享电动车厂家 共享电单车厂商 本铯智能科技 本铯智能电动车厂家

重磅开源!业内首个React Native转微信小程序引擎_语言 & 开发_京东ARES多端技术团队_InfoQ精选文章