解密与思考Rax 小程序运行时方案

微信小程序开发教程栏目介绍Rax 小程序运行时的方案。

2020 年 3 月，暨支持编译时方案之后，rax 小程序发布了支持运行时方案的版本。截至目前，rax 仍是业界唯一一个同时支持编译时和运行时方案的小程序开发框架。本文将向大家介绍 rax 小程序运行时方案的原理以及我们的思考。

回顾编译时方案

介绍运行时方案之前，我们再回顾下什么是编译时方案。顾名思义，编译时方案侧重于编译，这其中的代表框架是 Taro v2.x。其通过静态编译的方式，将 JSX 转换为小程序的模板语言（即 WXML/AXML 等），再辅以轻量级的运行时 JS 代码，抹平小程序生命周期和 React 生命周期的差异，使用户能够以熟悉的 React DSL 进行小程序开发。Rax 的编译时方案原理与 Taro v2.x 类似，关于实现细节，可以参考之前的文章Rax 转小程序链路原理解析（一）及Rax 小程序编译时方案原理解析。区别于编译时方案，运行时方案侧重在运行时实现渲染能力，不依赖静态编译，因此几乎没有语法限制，这也是其最大的特点。下面就来看一下运行时方案实现的原理。

诞生基础

小程序的底层实现实际上也是基于 Web 技术，但是反映至开发者层面，与 Web 却又大相径庭。在小程序中，逻辑层和视图层隔离，逻辑层通过唯一的 setData 方法将数据传递至视图层触发渲染，视图层则通过事件的方式触发逻辑层代码，其架构如下图所示。相比 Web 开发时开发者可以通过 JS 调用浏览器提供的 DOM/BOM API 随心所欲操作渲染内容，小程序的架构更加封闭也更安全，但也意味着 Web 代码无法直接在小程序上运行。

对于现代的前端框架（React/Vue）来说，底层基本都是通过调用 DOM API 来创建视图。而小程序的视图层模板是需要开发者事先写好的，这意味着动态创建 DOM 的方式在小程序中不被允许。但是，小程序的自定义组件具有的『自引用』特性为动态创建 DOM 打开了突破口。所谓自引用，就是自定义组件支持使用自己作为子节点，也就意味着通过递归引用的方式，我们能够构造任意层级和数量的 DOM 树。

举例来说，假设一个小程序自定义组件 element 的 WXML 模板如下所示：

<view  wx:if="{{r.tagName === 'view'}}"  id="{{r.nodeId}}">  <block  
    wx:for=“{{r.children}}”   
    wx:key="nodeId"  >      <element data="{{r: item}}" />  </block></view><text   wx:elif="{{r.tagName === 'text'}}">  {{r.content}}</text>复制代码