Taro 架构编译时和运行时

Taro 当前架构
Taro 当前的架构主要分为:编译时 和 运行时。

其中编译时主要是将 Taro 代码通过 Babel[11] 转换成 小程序的代码,如:JS、WXML、WXSS、JSON。

运行时主要是进行一些:生命周期、事件、data 等部分的处理和对接。

 

Taro 编译时
有过 Babel 插件开发经验的应该对一下流程十分熟悉,Taro 的编译时也是遵循了此流程,使用 babel-parser[12] 将 Taro 代码解析成抽象语法树,然后通过 babel-types[13] 对抽象语法树进行一系列修改、转换操作,最后再通过 babel-generate[14] 生成对应的目标代码。

详情可以参考:babel-handbook[15]

图片
整个编译时最复杂的部分在于 JSX 编译。

我们都知道 JSX 是一个 JavaScript 的语法扩展,它的写法千变万化,十分灵活。这里我们是采用 穷举 的方式对 JSX 可能的写法进行了一一适配,这一部分工作量很大,实际上 Taro 有大量的 Commit 都是为了更完善的支持 JSX 的各种写法。

但尽管如此,我们也不可能完全覆盖所有的情况,因此还是推荐大家按照官方规范书写 React 代码,同时,我们也提供了丰富的 ESlint 插件来辅助大家书写规范的代码。

图片
这一块我们团队内部一直有个梗:如果你使用 Taro 开发感觉 Bug 少,那说明你的 React 代码写得很规范。

Taro 运行时
接下来,我们可以对比一下编译后的代码,可以发现,编译后的代码中,React 的核心 render 方法 没有了。同时代码里增加了 BaseComponent 和 createComponent ,它们是 Taro 运行时的核心。

// 编译前
import Taro, { Component } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import './index.scss'

export default class Index extends Component {

config = {
navigationBarTitleText: '首页'
}

componentDidMount () { }

render () {
return (

Hello world!

)
}
}

// 编译后
import {BaseComponent, createComponent} from '@tarojs/taro-weapp'

class Index extends BaseComponent {

// ...

_createDate(){
//process state and props
}
}

export default createComponent(Index)

BaseComponent 大概的 UML 图如下,主要是对 React 的一些核心方法:setState、forceUpdate 等进行了替换和重写,结合前面编译后 render 方法被替换,大家不难猜出:Taro 当前架构只是在开发时遵循了 React 的语法,在代码编译之后实际运行时,和 React 并没有关系。

图片
而 createComponent 主要作用是调用 Component() 构建页面;对接事件、生命周期等;进行 Diff Data 并调用 setData 方法更新数据。

总结
因此,整个 Taro 当前架构的特点是:

重编译时,轻运行时:这从两边代码行数的对比就可见一斑。
编译后代码与 React 无关:Taro 只是在开发时遵循了 React 的语法。
直接使用 Babel 进行编译:这也导致当前 Taro 在工程化和插件方面的羸弱。

转载请注明出处:https://www.onexin.net/taro-complier-and-runtime/

相关文章:

1、Taro 编译分为 dev 和 build 模式
https://www.onexin.net/taro-dev-build/

2、Taro开放式跨端跨框架环境安装及使用
https://www.onexin.net/taro-installation-and-use/

Leave a Reply