一篇文章理解 Taro1/3原理

最近在进行 Taro项目的升级,由 Taro1升级到 Taro3,但是细想一下一直都是在使用 Taro,却没有进行深入的了解,本篇文章就深入解析下

什么是 Taro? 为什么要用 Taro

在使用任何一种技术之前,都要了解这两个问题:是什么?为什么要用?
Taro是一个开放式跨端跨框架的解决方案,支持使用 React/Vue/Nerv等框架开发微信 / 京东 / 百度 / 支付宝 / 字节跳动 / QQ / 飞书 小程序 / H5 / RN 等应用。 这么说可能不容易理解,简单来说就是代码一次编写,多端使用。现在市面上的小程序种类特别多,包括最火的微信小程序在内还有支付宝小程序、百度小程序、字节跳动等等,还有一些H5、RN等等应用,如果你的项目要在多端上线就不得不编写多套代码,Taro就是为此而生,使用 Taro编写一套代码就可以在多端使用,大大减少了成本。

## Taro的设计思路 为了更好的理解 Taro,原理这部分我的思路是先剖析 Taro1,再以对比的方式剖析 Taro3相比于 Taro1做了哪些改动和升级。 使用 Taro1上手非常容易,可以说是只要掌握了 React 那就几乎掌握了 Taro,Taro和 React一样,使用声明式的 JSX语法,并且 Taro组件的生命周期和 React完全一致

第一个问题来了:为什么 Taro要采用 React的语法?
按照 Taro团队的说法,之所以选择 React要从设计 Taro的初衷说起,Taro团队认为 Taro框架应该是这样的:

  • 代码多端复用
  • 完善且强大的组件机制
  • 学习成本低
  • 背后生态强大

经过调研后Taro团队认为 React最符合要求,但是对于微信小程序而言,Raact完全没办法进行开发,那么第二个问题来了

如何完成React代码在小程序端的适配?
在讲解这一点之前需要理解几个概念:

  • Babel: Babel是一款JS代码编译器,举例来说,一些 JS的高级语法,比如 ES6,有些浏览器是不支持的,但是在开发中我们又想去使用这些语法,这时就可以利用 Babel将ES6代码编译成浏览器可以运行的代码,这个代码转换的过程也就是计算机基础中的编译原理的过程:输入源代码 => 词法分析 => 语法分析 => 语义分析 => 转换 => 新代码生成
  • 抽象语法树(AST): 什么是抽象语法树,网络上的解释过于笼统,按照我的理解,抽象语法树就是将编程语言的特定语法从源代码中剥离,仅仅关注源代码的结构和语意,这很重要。可以通过下面的截图感受下什么是 AST

了解上面的概念之后,上面的问题就有了思路:可以将React代码分析成抽象语法树,根据语法树小程序支持的模板代码,再做一个小程序运行时框架处理事件和生命周期与小程序框架兼容,然后把业务代码跑在运行时框架就完成了小程序端的适配

编译时使用babel-parser将react代码转换为抽象语法树,然后通过babel-types对抽象语法树进行修改,最后通过babel-generator将修改后的抽象语法树转换为小程序代码。这样的实现有以下几个缺点:

  • 1· jsx支持程度不完美,Taro对jsx的适配是在编译时去实现的,但是jsx非常灵活,因此不能做到 100%的适配,Taro团队采用穷举的方式对jsx可能的写法进行一一适配,工作量巨大
  • 2 不支持 source-map,Taro对源代码进行一系列的转换操作之后就不支持 source-map,用户调试很不方便

以上仅仅是设计思路,可以实现,但是还是有问题,仅仅将代码按照对应的语法规则转换,远远不够,因为不同的端会有自己的原生组件,端能力 api等等,代码转换过去可能不能直接执行。例如小程序中的普通容器是而 H5是

;小程序中提供了丰富的端能力 api,比如网络请求、文件下载、数据缓存等等,而在h5中对应的功能 api则不一致,那么第三个问题来了

怎么弥补不同端的差异?
Taro的做法是定制一个统一的组件库标准,以及统一的 api标准,在不同的端依靠他们的语法和能力去实现这个组件库与api,同时还要为不同的端编写运行时框架。在书写代码的时候,只需要引入标准组件库 @tarojs/components 与运行时框架 @tarojs/taro ,代码经过编译之后,会变成对应端所需要的库。举个例子,在小程序端,Taro实现了 @tarojs/redux 这个库来作为小程序的 Redux 辅助库,并且以他作为基准库,它具有和 react-redux 一致的 API,在书写代码的时候,引用的都是 @tarojs/redux ,经过编译后,在 H5 端会替换成 nerv-redux(Nerv的 Redux 辅助库),在 RN 端会替换成 react-redux。这样就实现了 Redux 在 Taro 中的多端支持。

Taro1 与 Taro3

看完上面的内容相信你已经对 Taro有了一个初步的认知,从 Taro1 到 Taro3中间的数次迭代和更新此处不细说了,接下来着重解析这两个版本进行对比。
Taro1 与 Taro3的架构区别
Taro 1/2 属于编译型架构,主要通过对类 React 代码进行语法编译转换地方式,得到各个端可以运行的代码,再配合非常轻量的运行时适配,以及根据标准组件库、API 进行差异抹平,从而实现多端适配的目的,整体架构如下。

Taro3可以大致理解为解释型架构,这个工作就主要是在运行时"对代码进行解释",怎么理解呢?升级为Taro后你可以发现package.json文件里面多了个(当然不止这一个)@taro/runtime的依赖,Taro3自己实现了一套类似浏览器的BOM/DOM那一套API,通过webpack的plugin注入到小程序的逻辑层,打包编译后,你最终的代码都是基于BOM/DOM这几个API来实现你的具体功能,比如:不管什么平台,都有自己一套元素dom的规则,都有各自平台的类似bom的全局api规则,Taro3做的就是整合这些厂家的规则封装为类似BOM/DOM的思想去用,也就是说,我不管你开发时用的什么框架,我只要保证你运行时能帮你适配到各个平台即可。

这样做的最直观的好处就是前面说到的,不再受限制与框架本身了,理论上来说,Taro不仅可以支持Vue和React,也能用jquery、Angular等等的库进行跨端开发。站在React的使用者角度:通过taro2和taro3两个项目开发经验来说还有一点最直观的感受,taro3中写JSX更加舒服了!其实就更加友好的支持JSX这一点,应该是顺理成章的,因为taro的架构其实就是无限接近于React的开发体验,适配的工作是通过运行时的BOM/DOM去完成的,而不是像之前版本一样,通过穷举 的方式对 JSX 的写法进行适配。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/228643.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

LangChain的函数,工具和代理(六):Conversational agent

关于langchain的函数、工具、代理系列的博客我之前已经写了五篇,还没有看过的朋友请先看一下,这样便于对后续博客内容的理解: LangChain的函数,工具和代理(一):OpenAI的函数调用 LangChain的函数,工具和代…

05-微服务架构构建之六边形架构

文章目录 前言一、六边形架构的概念二、六边形架构的特点三、微服务架构的良好实践总结 前言 通过前面的学习,我们掌握了微服务架构的基本组件等内容。在选择适合每个微服务的架构时,六边形架构“天然”成为每个微服务构建的最佳选择。 一、六边形架构的…

HttpComponents: 概述

文章目录 1. 概述2. 生态位 1. 概述 早期的Java想要实现HTTP客户端需要借助URL/URLConnection或者自己手动从Socket开始编码,需要处理大量HTTP协议的具体细节,不但繁琐还容易出错。 Apache Commons HttpClient的诞生就是为了解决这个问题,它…

数据资源和数据资产的区别是什么?

数据资源:狭义的数据资源是指数据本身,即企业运作中积累下来的各种各样的数据记录,如客户记录、销售记录、人事记录、采购记录、财务数据和库存数据等。广义的数据资源涉及数据的产生、处理、传播、交换的整个过程,包括数据本身、…

Vue3小兔鲜电商前台项目总结

1.code地址 https://github.com/15347113049/vue-rabbit.git 2.项目基础栈 Vue3全家桶:create-vue Pinia ElementPlus Vue3Setup Vue-Router VueUse 3.主要业务 (1)整体路由搭建 (2)layout布局 (3)Home页一级分类 (4)二级分类详情页 (5)登录功能 (6)购物车(头部…

基于POSIX标准的Linux进程间通信

文章目录 1 管道(匿名管道)1.1 管道抽象1.2 接口——pipe1.3 管道的特征1.4 管道的四种情况1.5 匿名管道用例 2 命名管道2.1 创建一个命名管道——mkfifo2.2 关闭一个管道文件——unlink2.3 管道和命名管道的补充2.4 命名管道用例 3 共享内存3.1 原理3.2…

持续集成交付CICD:Jenkins使用GitLab共享库实现前后端项目Sonarqube

目录 一、实验 1.Jenkins使用GitLab共享库实现后端项目Sonarqube 2.优化GitLab共享库 3.Jenkins使用GitLab共享库实现前端项目Sonarqube 4.Jenkins通过插件方式进行优化 二、问题 1.sonar-scanner 未找到命令 2.npm 未找到命令 一、实验 1.Jenkins使用GitLab共享库实现…

【MATLAB源码-第98期】基于matlab的能量谷优化算法(EVO)无人机三维路径规划,输出做短路径图和适应度曲线。

操作环境: MATLAB 2022a 1、算法描述 能量谷优化算法(Energy Valley Optimization, EVO)是一种启发式优化算法,灵感来源于物理学中的“能量谷”概念。它试图模拟能量在不同能量谷中的转移过程,以寻找最优解。 在EVO…

vue 一直运行 /sockjs-node/info?及 /sockjs-node/info报错解决办法

sockjs-node介绍 sockjs-node 是一个JavaScript库,提供跨浏览器JavaScript的API,创建了一个低延迟、全双工的浏览器和web服务器之间通信通道。 服务端:sockjs-node(https://github.com/sockjs/sockjs-node) 客户端&a…

【JNPF】好用、高性价比的低代码开发平台

目录 1.JNPF介绍 突出优势 2.JNPF的开放性与扩展性 平台的开放性: 平台高拓展性 在快速发展的软件开发领域,低代码平台已经成为了一种重要的开发方法,它使非专业开发人员也能够参与到软件开发中去,大大加速了软件开发的效率。…

Stable Diffusion XL on diffusers

Stable Diffusion XL on diffusers 翻译自:https://huggingface.co/docs/diffusers/using-diffusers/sdxl v0.24.0 非逐字翻译 Stable Diffusion XL (SDXL) 是一个强大的图像生成模型,其在上一代 Stable Diffusion 的基础上主要做了如下优化:…

企业计算机服务器中了360勒索病毒如何解密,勒索病毒解密数据恢复

网络技术的不断应用与发展,为企业的生产运营提供了极大便利,但随之而来的网络安全威胁也不断增加。近期,云天数据恢复中心接到很多企业的求助,企业的计算机服务器遭到了360后缀勒索病毒攻击,导致企业的所有数据被加密&…

同一个kmz数据同样的底图在QGIS上显示位置正常, 在Mars3d中显示就偏移了一些

问题: 1.同一个kmz数据同样的底图在QGIS上显示位置正常, 在网页中显示就偏移了一些 在qgis上的显示效果,和在mars3d的显示效果:数据明显存在偏移。 解决步骤: 1.查看了kmz数据,里面实际是tif图片数据,估…

【方法】Excel表格的“限制保护”不想要了,如何取消?

我们知道,Excel表格可以设置“限制保护”,保护文件不被随意更改,那如果后续不需要保护了,如何取消呢? 下面小编来说说Excel表格常用的三种“保护”,是如何取消的。 第一种,Excel表格的工作表或…

[全志Tina/Linux]全志修改bootlogo分区数据从而修改bootlogo

一、需求 在不进行镜像烧录的情况下,通过启动项或脚本将已存在于主板的bootlogo文件更新到bootlogo分区中,从而实现bootlogo的更新 二、操作 1、在主板上查找bootlogo文件路径 find -name bootlogo* 实机效果: 2、进入文件夹路径 cd ./d…

python:差分进化算法(Differential Evolution,DE)求解23个测试函数(提供python代码)

一、差分进化算法 差分进化算法(Differential Evolution,DE)于1997年由Rainer Storn和Kenneth Price在遗传算法等进化思想的基础上提出的。差分进化思想来源即是早期提出的遗传算法(GeneticAlgorithm,GA),…

Plonky2 = Plonk + FRI

Plonky2由Polygon Zero团队开发,实现了一种快速的递归SNARK,据其团队公开的基准测试,2020年,以太坊第一笔递归证明需要60s生成,而于今Plonky2在 MacBook Pro上生成只需 170 毫秒。 下面将逐步剖析Plonky2。 整体构造 …

人工智能行业报告:2023年度AI设计实践报告

今天分享的AI系列深度研究报告:《人工智能行业报告:2023年度AI设计实践报告》。 (报告出品方:meitu) 报告共计:46页 AI设计在中国的普及程度如何? 个人应用: 近半受访者用过原生AI设计工具,…

vue3中子组件调用父组件的方法

<script lang"ts" setup>前提 父组件&#xff1a; 子组件&#xff1a; const emit defineEmits([closeson]) 在子组件的方法中使用&#xff1a; emit(closeson)

el-table操作栏按钮过多 增加展开/收起功能

是的 如图所示有那么一条数据 列表操作栏的按钮七八个 小屏笔记本啥数据项也别看了 就剩下个固定列大刺刺的占着整个页面 解决方法&#xff1a; <el-table-column :width"tableToggle ? 600 : 300" label"操作栏" align"center" header-ali…