去哪儿网 ReactNative 跨小程序多端方案介绍

1 前言

qrn-remax-unir 是由去哪儿网前端技术团队实现的一套将 RN 适配到小程序端的跨端组件，通过该组件库可快速方便的将 RN 源代码直接运行到小程序端。方案参考了 react-native-web 的适配方案，使用 remax 框架来实现适配组件库并达到适配多小程序的目的。和 react-native-web一样，它对 RN 源代码侵入度低，并且调试和替换组件相当方便。

方案来自于社区，我们只是合理的应用用来解决我们遇到的业务问题，最终开发了这套组件库，也希望开源出来跟大家分享和共同探讨多端开发之路。

下面我们简单介绍下 RN 到小程序的适配方案和适配组件库的点滴。

2 多端方案回顾

qrn-remax-unir 组件库是整个去哪儿网跨端方案的一个部分，通过整套方案可实现将 RN 代码直接运行到 H5 和小程序，达到跨 IOS，ADR，H5，小程序的目标。整体多端方案的思路是：

1. 使用 react-native-web 将 RN 代码适配到 H5 上运行，这也是 RN 官方推荐和集成的方式。
2. 在 remax 组件的基础上实现一套 RN 的组件库，借用 remax 来适配到多端(qrn-remax-unir)。
3. 借助 webpack 的特性来实现针对不同平台的打包。

3 RN 相关多端方案

3.1 对 alita 的调研

在最初的调研中我们注意到 alita 可以实现将 ReactNative 转换到微信小程序运行，也对方案进行了详细的调研:

1. alita 会在编译阶段将 JSX 语法按照代码块编译成微信 wxml 的碎片，然后用 templete 包裹；
2. 内部实现了一个 mini-react 来对接适配 react 和小程序的生命周期。

详细原理可参考：
https://zhuanlan.zhihu.com/p/69333351
https://www.jqhtml.com/44555.html

于是跑了些 demo 对方案进行使用觉得还是跟我们的期望有些差距：

1. 虽然期望是对 RN 代码无入侵，但还是会对 RN 源码有限制的，部分特性不能用，动画之类的要求用 alita 提供的自定义动画库；
2. 内部使用了自定义的 mini-react 来对接 react 和小程序的生命周期，考虑后期对 react 新特性的适配进度风险；
3. 专注于 RN 到微信小程序的转换，对其他小程序不支持。

基于以上原因我们最终没有直接使用该方案，调研过程感觉他们对 jsx 模板的处理思路还是很新颖的，是很好的借鉴。

3.2 remax 简单原理

remax 可实现在小程序中用真正的 react 进行开发。remax 将自己实现成了一个 react 的渲染器，收集宿主 UI 变更指令生成页面 VNode 树，然后在小程序渲染层渲染这个树。

详细原理可参考：https://juejin.cn/post/6844904131157557262

由于基于运行时适配的方案，有以下优缺点：

1. 适配在 react 虚拟 dom 之上，对 react 的技术栈无任何限制，redux，mobx，hooks 等都可自由使用；
2. 模板的动态处理在渲染的时候可能效率低下，需要针对性解决；
3. 由于没有编译处理，运行时都是平台源代码，查问题更方便；
4. 基于 react 组件，可以很好的对小程序原生组件进行支持；
5. 并没有提供对各个小程序的跨端组件，只对部分基础组件进行了封装和适配。

4 我们的适配方案

remax 虽然支持 remax 的语法，但是他是基于自定义组件提供的语法 DSL，提供的组件和 RN 也没有任何关系。但他们对 react 语法适配到小程序的方案还是很大胆实用的，也启发我们可以按照类似的适配方案来实现 RN 组件到小程序的适配，这样就可以将 RN 运行到小程序了。

4.1 ReactNative 到 remax 组件

调研 remax 的适配方案，虽然方案原理说起来很简单，但是真正要做这么一套东西评估了下还是非常耗时耗力的。

重新评估下来，发现 remax 其实已经可以做到 react 到小程序的适配，