react构建小程序的转换类框架

目标：一码多端
类型：转换类框架大的方面分为两种 – 编译时/运行时

1、nanachi（娜娜奇）：去哪儿网
2、taro: 京东，taro1/2编译类型，taro3解释类型（类似微信kbone,模拟 Web 环境来对接前端生态)
3、remax: 阿里蚂蚁金服
4、Rax: 淘宝(业界唯一一个同时支持编译时和运行时引擎的小程序开发方案)

编译类型和运行类型框架的优缺点：

劣势：

• 劣势1：数据传输量大，我们需要将完整的组件树在逻辑层传输到视图层；
• 劣势2：页面上存在大量的监听器，每一个组件都需要无时无刻监听所有的事件，在事件不断触发的过程中，通过 nodeId 筛选出真正需要触发的事件；
• 劣势 3：模板递归渲染，如果使用原生语法，原生框架可以在渲染前就知道页面大概的结构，来对渲染进行优化，但是如果仅仅只是通过类似 这样的信息，是很难判断页面的真实结构的。

逻辑层将一个和节点渲染信息相关的组件树传递给视图层，视图层通过节点类型判断然后进行视图渲染。

在目前这个阶段，即使是运行时方案，也有不同的实现思路。以 Kbone (Rax 运行时方案是从 Kbone 改造而来) 和 Taro Next 都是通过模拟 Web 环境来彻底对接前端生态，而 Remax 只是简单的通过 react reconciler 连接 React 和小程序。我认为下面的过程的VDOM树更偏向于模拟 Web 环境的方案

下面这个图简要的描述了一下整个过程：

虽然只用了维护两个字，但是逻辑层做的事情其实比较复杂。

• 首先要做的是，去处理节点间的关系，去模拟 appendChild/ removeChild/updateNode 等各个行为来操作 VDOM 树。
• 其次比较重要的是去模拟事件，在逻辑层每一个节点类会继承自 EventTarget 基类，这个和 W3C 是一样的，
• 然后通过 nodeId 作为标识去收集需要监听的事件，当视图层通过 action 触发了某个节点的事件之后，
• 再通过原生小程序事件中的 event.currentTarget.dataset.nodeId获取到目标节点的 id，最终触发目标回调。

推荐文章：在 2020 年，谈小程序框架该如何选择