react构建小程序框架及remax的工作原理
1、为什么要用 React 来构建小程序?
- react生态体系完善。
自Facebook在2013年5月开源React,经历了7年多的发展,react的社区生态体系非常庞大,若是使用react来构建小程序,那么在小程序开发中可以充分利用 React 生态体系中大量的技术沉淀(比如:react-use、field-form)。
- 更完整的 TypeScript 支持。
(1)当然也可以用 TypeScript 去写现有的小程序,但是由于小程序的架构原因(在小程序中,模版层和逻辑层是分开的,分别运行在渲染线程和逻辑线程),模板层跟逻辑层有天然的割裂,即使在逻辑层使用了 TypeScript,在模板层也无法享受类型检查和自动补全带来的便利。
(2)引入 React 后,我们的代码全部运行在逻辑层中,可以全程静态类型护航,给你满满的安全感。
2、使用react构建小程序的框架有哪些?
1、nanachi(娜娜奇):去哪儿
2、taro: 京东,taro1/2编译类型,taro3解释类型(类似微信kbone,模拟 Web 环境来对接前端生态)
3、remax: 阿里蚂蚁金服
4、Rax: 淘宝(业界唯一一个同时支持编译时和运行时引擎的小程序开发方案)
编译时方案 | 运行时方案 | 编译时/运行时方案 |
---|---|---|
nanachi | remax | rax |
taro1/2 | taro3 |
推荐文章:在 2020 年,谈小程序框架该如何选择
3、现有的方案
静态编译
目前社区中使用 React 构建小程序的方案大都使用静态编译的方式实现。
所谓静态编译: 就是使用工具把代码语法分析一遍,把其中的 JSX 部分和逻辑部分抽取出来,分别生成小程序的静态模板和 小程序页面的定义。
静态编译来构建小程序的缺陷:
js动态写法,无法编译,需规避很多的动态写法。
因为语法分析是静态的,所以这些方案都会去限制一些动态的写法。另外正是因为 JavaScript 语言的动态性,要去做语法分析本身就是件很复杂的事情,所以这些方案实现起来往往也非常复杂。
例子:含有动态语法无法正确编译的case
运行时并没有 React 的存在,实际运行的是静态编译转换之后的小程序代码。
4、remax的实现方案及工作原理
Remax 让你可以使用真正的 React 去构建小程序,你可以把他理解成面向小程序的 React Native。
先看下react的架构:
- 最下面一层是 React 本身,上层的 ReactDOM 和 ReactNative等,也就是所说的render层。
- Renderer层跟 React 之间通过渲染器(ReactReconciler )连接,渲染器的作用就是把React 的虚拟 DOM 映射到对应平台的真实元素上去,(譬如:react-dom 的作用就是把虚拟 DOM 映射到浏览器的真实 DOM 上)。
- Remax实际上就是实现了一个面向小程序的渲染器,它把「虚拟 DOM」渲染到了小程序的视图层上。
问题:小程序没有DOM结构,remax是如何把虚拟DOM渲染到小程序的视图上的呢?
》》》remax引入了Vnode
remax工作流程:
(1)在remax运行时,会通过渲染器将react中的组件渲染成Vnode结构,然后会调用节点上的 toJSON 方法,把这个 VNode 变成一个 JSON 对象,这个JOSN对象会被作为小程序页面page的data数据。
Vnode是什么?
VNode 就是 DOM 替代品,所以他长得也很像 DOM 元素,上面会有节点的类型(小程序中基础组件如:view、image、text),节点的属性和子节点,另外会有新增、删除和插入节点的方法.
import React from 'react';
import { View, Text } from 'remax/alipay';const IndexPage = () => {return (<View className="greeting"><Text>Hello Remax</Text></View>);
};export default IndexPage;
{"id": 0,"type": "root","children": [{"id": 1,"type": "view","props": {"className": "greeting"},"children": [{"id": 2,"type": "text","props": {},"children": [{"type": "plain-text","text": "Hello Remax"}]}]}]
}
(2)remax会使用脚手架工具remax-cli 来构建我们的代码 ,这个构建过程会生成一个能遍历 data数据的模板。
这个模板会先去遍历 data 根节点下的所有子元素,然后根据子元素的类型,使用其对应的模板来渲染这个节点。
利用模板递归渲染 data 的过程,也就把 React 运行到了小程序中并渲染出了界面。
// 模版
<block a:for="{{root.children}}" a:key="{{item.id}}"><template is="{{'REMAX_TPL_' + item.type}}" data="{{item: item}}" />
</block>
// view类型模版
<template name="REMAX_TPL_view"><view class="{{item.props['className']}}"><block a:for="{{item.children}}" key="{{item.id}}"><template is="{{'REMAX_TPL_' + item.type}}" data="{{item: item}}" /></block></view>
</template><template name="REMAX_TPL_text"><text><block a:for="{{item.children}}" key="{{item.id}}"><template is="{{'REMAX_TPL_' + item.type}}" data="{{item: item}}" /></block></text>
</template><template name="REMAX_TPL_plain-text"><block>{{item.text}}</block>
</template>
小结:
remax来构建小程序的思路,没有借助重新打造react的轮子以及使用静态编译分析语法的方式,将react编译成运行需要的小程序语言。
remax的方案实现:
我觉得主要还是借鉴了react的架构和RN的实现思路,从某种程度上来说,remax其实就是面向小程序的RN,只不过这个面向小程序的实现不能使用RN的渲染器,而是remax开发的面向小程序的渲染器。
remax的亮点:
- Vnode层的引入
- Vnode转换成JSON的页面数据
- 面向小程序的渲染器
remax的工作原理:
(1)引入了Vnode层,通过渲染器将react的虚拟DOM渲染成了Vnod结构树。
(2)然后会调用节点上的 toJSON 方法,把这个 VNode 变成一个 JSON 对象。
(3)这个JSON对象会作为小程序页面的Data数据。
(4)在使用reamx-cli构建我们的代码时,构建过程会生成一个能遍历 data 的模板,在遍历的过程中,会根据元素的类型type去匹配对应的页面模版template,这个递归遍历的过程,通过使用对应的模版来承接data的数据展示,最终将data中数据展现在页面上。
参考文章:
1、Remax - 使用 React 开发小程序 - SEE Conf
2、在小程序中实现动态模板 - Remax 实现原理
3、Rax 小程序运行时方案解密与思考
react构建小程序框架及remax的工作原理相关推荐
- 使用 React 开发小程序
作者 | 边柳 原文 | https://www.yuque.com/seeconf/2020/qsytho 为什么要用 React 开发小程序 大家知道微信小程序在商业上取得了非常大的成功,正是因为 ...
- 滴滴小程序框架Mpx2.0
@hiyuki,滴滴出行网约车webapp乘客团队的负责人,也是滴滴开源的小程序框架Mpx的负责人和核心作者 Mpx是一款致力于提高小程序开发体验和效率的增强型小程序框架,目前在滴滴公司内部支撑了包括 ...
- 滴滴开源小程序框架 Mpx
Mpx 是一款致力于提高小程序开发体验的增强型小程序框架,通过 Mpx,能够以最先进的 Web 开发体验 ( Vue + Webpack ) 来开发生产性能深度优化的小程序,Mpx 具有以下一些优秀特 ...
- 前端面试题(HTML、JS、Vue、React、小程序)
前端面试题 HTML && CSS HTML 1.Div 里面有个一个div ***** Q:有几种方法可以水平,垂直居中 2.doctype的作用 * 3.link标签和import ...
- 微信小程序学习笔记( 小程序框架 )
必看 这个只是我的学习过程算是日记形式吧,过程是按微信的官方文档的循序来,从 指南中的小程序框架 开始,指南中这一节之前还有页面配置,目录结构,还有很多介绍,没有写但是是非常重要的,一定要看,像指南后 ...
- uni-app是如何构建小程序的?
文章转自:uni-app是如何构建小程序的? - 掘金 推荐看原文. uni-app是一个基于Vue.js语法开发小程序的前端框架,开发者通过编写一套代码,可发布到iOS.Android.Web以及各 ...
- 美团小程序框架mpvue入门教程
美团小程序框架mpvue入门教程 自打写了 美团小程序框架mpvue蹲坑指南, 一发不可收拾,今天趁周末空闲,来写个mpvue(没朋友)的简单入门教程,本教程只针对新手,老鸟勿喷. 另外,我还专门为本 ...
- Web内核微信小程序框架实践
作者:boxuechen,腾讯 WXG 客户端开发工程师 背景 在正式进入分享之前,简单介绍一下做这个小程序新框架的背景思路,主要目的有以下几点: 新框架和微信的主客户端解耦,能够独立运行,并且可以同 ...
- axure 小程序 lib_详细揭秘微信小程序框架技术——Mpx
与目前业内的几个小程序框架相比较而言,mpx 开发设计的出发点就是基于原生的小程序去做功能增强.所以从开发框架的角度来说,是没有任何"包袱",围绕着原生小程序这个 core 去做不 ...
最新文章
- 洛谷P5273 【模板】多项式幂函数 (加强版)
- 另一种公钥私钥认证方式
- 干了10年软件工程师,我学到10个教训
- 【攻防世界015】notsequence
- Android踩坑日记:使用Fesco图片加载库在GridView上的卡顿优化
- 分享一个HTML5画布实现的超酷文字弹跳球效果
- git serialtool_Git学习笔记---协作的一般流程
- 20_星仔带你学Java之Java常用类
- java计算器功能_java实现简易计算器功能
- 油猴天眼查公司链接获取(用油猴实现爬虫python版)
- 微信小游戏教程(三) 新手教程
- Java 两个日期间的天数计算
- html压缩工具中文,HTML Compress(html压缩工具)
- TP4056 充电电路学习借鉴
- 第四章 智能合约 [20]
- 74HC165应用介绍
- 宏碁施振荣:大陆是国际化的练兵场
- c语言寻找因数,【代码】求一个数的因数和、求优化、顺便也供新人参考算法...
- From detailed models to formal spiking neurons
- 乌镇互联网大会官方首次使用AI同传,搜狗为雷军提供机器翻译