React小程序运行时H1

原理H2

小程序的渲染层和逻辑层分别由两个线程管理：渲染层的界面使用 WebView 进行渲染；逻辑层采用 JSCore 运行 JavaScript 代码。一个小程序存在多个界面，所以渲染层存在多个 WebView。这两个线程间的通信经由小程序 Native 侧中转，逻辑层发送网络请求也经由 Native 侧转发，小程序的通信模型下图所示。

微信小程序技术原理分析

静态编译类框架H2

由于大多开发者都更熟悉 React 和 Vue 的 API 和语法，加上小程序本身的开发方式确实让人痛苦，于是便有了一些框架来将这些熟悉的语法编译到小程序的 WXML/WXSS/JS 上，其中比较具有代表性的例如 taro(1.x/2.x)，其目标就是让开发者能够用 React 的开发方式编写小程序。

这类框架的实现原理其实并非真的是一个 React 或者类 React 框架，而是把看起来像是 JSX 的模板通过静态编译的方式翻译成小程序自身的模板。

RemaxH2

Remax 的实现原理和基于静态编译的方案有所不同，其核心其实是重新实现了 ReactDOM 的部分。

Remax 要做的事情和 ReactNative 要做的事情非常类似，我们重新接管了 ReactDOM 的 render。在原有的 React 页面中，React 在完成 Diff 发现需要修改界面时，又 ReactDOM 把改变 Patch 到页面上。

而在小程序中由于我们不能直接修改页面，则由 React 完成 DIFF 后由 Remax 把修改 Patch 到内存中的虚拟 DOM 上，然后再通过小程序自己的虚拟 DOM 最后把改变同步到页面上。

在小程序中使用 React with Hooks · Issue #1 · remaxjs/remax

RN兼容小程序H1

react-native-webH2

把RN的组件和API都用H5实现适配一遍，适配其行为和默认样式，在打包的时候使用webpack的别名机制将用到的组件替换成react-native-web里的对应组件。

qunar-rnH2

1. H5上直接用react-native-web进行转换
2. 到小程序端使用reamx组件实现一套RN的组件库，借用remax来适配到多端
3. 借助webpack的特性来实现针对不同平台的打包

组件H1

Remax One