Taro 框架实现原理_ReactTaro 框架实现原理 Taro 1.x Taro 2.x Taro 3.x 小程序 H5 RN Web 多端框架



Taro 框架实现原理

小程序 H5 RN Web 多端框架

Taro 1.x & Taro 2.x

编译型架构, 语法编译转换

Taro 1/2 属于编译型架构,主要通过对类 React 代码进行语法编译转换的方式,得到各个端可以运行的代码,再配合非常轻量的运行时适配,以及根据标准组件库、API 进行差异抹平,从而实现多端适配的目的;

Taro 1/2 整体架构图

Taro 框架实现原理_Taro Next_02

Taro 1 与 Taro 2 的都是基于这种架构建立的方案, 主要区别:

Taro 1 在小程序端是自建构建体系;

Taro 2 则是所有端都采用 Webpack 进行编译,可以降低 Taro 自身编译系统的复杂度,同时能够让开发者使用 Webpack 的生态来自定义编译过程和结果;

可以认为 Taro 2 是 Taro 1 和 3 之间的一个过渡性版本

Taro 3.x

解释型架构, 小程序端模拟实现 DOM、BOM AP

Taro 3 则可以大致理解为解释型架构(相对于 Taro 1/2 而言),主要通过在小程序端模拟实现 DOM、BOM API 来让前端框架直接运行在小程序环境中,从而达到小程序和 H5 统一的目的;

而对于生命周期、组件库、API、路由等差异,我们依然可以通过定义统一标准,各端负责各自实现的方式来进行抹平;

Taro 3 中同时支持 React、Vue 等框架,甚至还支持了 jQuery,在不久的将来我们还能支持让开发自定义地去拓展其他框架的支持,如 Angular ;

Taro 3 整体架构图

Taro 框架实现原理_React