Taro3跨端跨框架原理初探

背景

在项目中，咱们用到了Taro3进行跨端开发，在这里分享下Taro3的一些跨端跨框架原理，也是但愿能帮助本身更好的去理解Taro背后的事情，也能加速定位问题。此文章也是起到一个抛砖引玉的效果，让本身理解的更加深刻一点。css

过去的总体架构，它分为两个部分，第⼀部分是编译时，第⼆部分是运⾏时。编译时会先对⽤户的 React 代码进⾏编译，转换成各个端上的⼩程序均可以运⾏的代码，而后再在各个⼩程序端上⾯都配上⼀个对应的运⾏时框架进⾏适配，最终让这份代码运⾏在各个⼩程序端上⾯。html

Taro3以前（重编译时，轻运行时）：

编译时是使用 babel-parser 将 Taro 代码解析成抽象语法树，而后经过 babel-types 对抽象语法树进行一系列修改、转换操做，最后再经过 babel-generate 生成对应的目标代码。前端

这样的实现过程有三⼤缺点：node

JSX ⽀持程度不完美。Taro 对 JSX 的⽀持是经过编译时的适配去实现的，但 JSX ⼜⾮常之灵活，所以还不能作到 100% ⽀持全部的 JSX 语法。 JSX 是一个 JavaScript 的语法扩展，它的写法变幻无穷，十分灵活。以前Taro团队是采用穷举的方式对 JSX 可能的写法进行了一一适配，这一部分工做量很大。
不⽀持 source-map。Taro 对源代码进⾏了⼀系列的转换操做以后，就不⽀持 source-map 了，⽤户调试、使⽤这个项⽬就会不⽅便。
维护和迭代⼗分困难。Taro 编译时代码⾮常的复杂且离散，维护迭代都⾮常的困难。

再看⼀下运⾏时的缺陷。对于每一个⼩程序平台，都会提供对应的⼀份运⾏时框架进⾏适配。当修改⼀些 Bug 或者新增⼀些特性的时候，须要同时去修改多份运⾏时框架。react

总的来讲，以前的Taro3.0以前有如下问题：webpack

Taro3以后（重运行时）：

Taro 3 则能够大体理解为解释型架构（相对于 Taro 1/2 而言），主要经过在小程序端模拟实现 DOM、BOM API 来让前端框架直接运行在小程序环境中，从而达到小程序和 H5 统一的目的，而对于生命周期、组件库、API、路由等差别，依然能够经过定义统一标准，各端负责各自实现的方式来进行抹平。而正由于 Taro 3 的原理，在 Taro 3 中同时支持 React、Vue 等框架，甚至还支持了 jQuery，还能支持让开发者自定义地去拓展其余框架的支持，好比 Angular，Taro 3 总体架构以下：git

Taro 小程序：

Taro 3 以后⼩程序端的总体架构。⾸先是⽤户的 React 或 Vue 的代码会经过 CLI 进⾏ Webpack 打包，其次在运⾏时会提供 React 和 Vue 对应的适配器进⾏适配，而后调⽤Taro提供的 DOM 和 BOM API，最后把整个程序渲染到全部的⼩程序端上⾯。github

React 有点特殊，由于 React-DOM 包含大量浏览器兼容类的代码，致使包太大，而这部分代码是不须要的，所以作了一些定制和优化。web

在 React 16+ ，React 的架构以下：算法

最上层是 React 的核心部分 react-core ，中间是 react-reconciler，其的职责是维护 VirtualDOM 树，内部实现了 Diff/Fiber 算法，决定何时更新、以及要更新什么。

而 Renderer 负责具体平台的渲染工做，它会提供宿主组件、处理事件等等。例如 React-DOM 就是一个渲染器，负责 DOM 节点的渲染和 DOM 事件处理。

Taro实现了taro-react 包，用来链接 react-reconciler 和 taro-runtime 的 BOM/DOM API。是基于 react-reconciler 的小程序专用 React 渲染器，链接 @tarojs/runtime的DOM 实例，至关于小程序版的react-dom，暴露的 API 也和react-dom 保持一致。

建立一个自定义渲染器只需两步:具体的实现主要分为两步：

第一步: 实现宿主配置( 实现 **react-reconciler** 的 **hostConfig** **配置)**这是react-reconciler要求宿主提供的一些适配器方法和配置项。这些配置项定义了如何建立节点实例、构建节点树、提交和更新等操做。即在 hostConfig 的方法中调用对应的 Taro BOM/DOM 的 API。

const Reconciler = require('react-reconciler');



const HostConfig = {

  // ... 实现适配器方法和配置项

};
# @tarojs/react reconciler.ts



/* eslint-disable @typescript-eslint/indent */

import Reconciler, { HostConfig } from 'react-reconciler'

import * as scheduler from 'scheduler'

import { TaroElement, TaroText, document } from '@tarojs/runtime'

import { noop, EMPTY_ARR } from '@tarojs/shared'

import { Props, updateProps } from './props'



const {

  unstable_scheduleCallback: scheduleDeferredCallback,

  unstable_cancelCallback: cancelDeferredCallback,

  unstable_now: now

} = scheduler



function returnFalse () {

  return false

}



const hostConfig: HostConfig<

  string, // Type

  Props, // Props

  TaroElement, // Container

  TaroElement, // Instance

  TaroText, // TextInstance

  TaroElement, // HydratableInstance

  TaroElement, // PublicInstance

  Record<string, any>, // HostContext

  string[], // UpdatePayload

  unknown, // ChildSet

  unknown, // TimeoutHandle

  unknown // NoTimeout

> & {

  hideInstance (instance: TaroElement): void

  unhideInstance (instance: TaroElement, props): void

} = {

  createInstance (type) {

    return document.createElement(type)

  },



  createTextInstance (text) {

    return document.createTextNode(text)

  },



  getPublicInstance (inst: TaroElement) {

    return inst

  },



  getRootHostContext () {

    return {}

  },



  getChildHostContext () {

    return {}

  },



  appendChild (parent, child) {

    parent.appendChild(child)

  },



  appendInitialChild (parent, child) {

    parent.appendChild(child)

  },



  appendChildToContainer (parent, child) {

    parent.appendChild(child)

  },



  removeChild (parent, child) {

    parent.removeChild(child)

  },



  removeChildFromContainer (parent, child) {

    parent.removeChild(child)

  },



  insertBefore (parent, child, refChild) {

    parent.insertBefore(child, refChild)

  },



  insertInContainerBefore (parent, child, refChild) {

    parent.insertBefore(child, refChild)

  },



  commitTextUpdate (textInst, _, newText) {

    textInst.nodeValue = newText

  },



  finalizeInitialChildren (dom, _, props) {

    updateProps(dom, {}, props)

    return false

  },



  prepareUpdate () {

    return EMPTY_ARR

  },



  commitUpdate (dom, _payload, _type, oldProps, newProps) {

    updateProps(dom, oldProps, newProps)

  },



  hideInstance (instance) {

    const style = instance.style

    style.setProperty('display', 'none')

  },



  unhideInstance (instance, props) {

    const styleProp = props.style

    let display = styleProp?.hasOwnProperty('display') ? styleProp.display : null

    display = display == null || typeof display === 'boolean' || display === '' ? '' : ('' + display).trim()

    // eslint-disable-next-line dot-notation

    instance.style['display'] = display

  },



  shouldSetTextContent: returnFalse,

  shouldDeprioritizeSubtree: returnFalse,

  prepareForCommit: noop,

  resetAfterCommit: noop,

  commitMount: noop,

  now,

  scheduleDeferredCallback,

  cancelDeferredCallback,

  clearTimeout: clearTimeout,

  setTimeout: setTimeout,

  noTimeout: -1,

  supportsMutation: true,

  supportsPersistence: false,

  isPrimaryRenderer: true,

  supportsHydration: false

}



export const TaroReconciler = Reconciler(hostConfig)
复制代码

第二步：实现渲染函数，相似于ReactDOM.render() 方法。能够当作是建立 Taro DOM Tree 容器的方法。

// 建立Reconciler实例, 并将HostConfig传递给Reconciler

const MyRenderer = Reconciler(HostConfig);



/** * 假设和ReactDOM同样，接收三个参数 * render(<MyComponent />, container, () => console.log('rendered')) */

export function render(element, container, callback) {

  // 建立根容器

  if (!container._rootContainer) {

    container._rootContainer = ReactReconcilerInst.createContainer(container, false);

  }



  // 更新根容器

  return ReactReconcilerInst.updateContainer(element, container._rootContainer, null, callback);

}
复制代码

通过上面的步骤，React 代码实际上就能够在小程序的运行时正常运行了，而且会生成 Taro DOM Tree。那么偌大的 Taro DOM Tree 怎样更新到页面呢？

由于⼩程序并无提供动态建立节点的能⼒，须要考虑如何使⽤相对静态的 wxml 来渲染相对动态的 Taro DOM 树。Taro使⽤了模板拼接的⽅式，根据运⾏时提供的 DOM 树数据结构，各 templates 递归地相互引⽤，最终能够渲染出对应的动态 DOM 树。

首先，将小程序的全部组件挨个进行模版化处理，从而获得小程序组件对应的模版。以下图就是小程序的 view 组件模版通过模版化处理后的样子。⾸先须要在 template ⾥⾯写⼀个 view，把它全部的属性所有列出来（把全部的属性都列出来是由于⼩程序⾥⾯不能去动态地添加属性）。

接下来是遍历渲染全部⼦节点，基于组件的 template，动态 “递归” 渲染整棵树。

具体流程为先去遍历 Taro DOM Tree 根节点的子元素，再根据每一个子元素的类型选择对应的模板来渲染子元素，而后在每一个模板中咱们又会去遍历当前元素的子元素，以此把整个节点树递归遍历出来。

Taro H5:

Taro 这边遵循的是以微信小程序为主，其余小程序为辅的组件与 API 规范。但浏览器并无小程序规范的组件与 API 可供使用，咱们不能在浏览器上使用小程序的 view 组件和 getSystemInfo API。所以Taro在 H5 端实现一套基于小程序规范的组件库和 API 库。

再来看⼀下 H5 端的架构，一样的也是须要把⽤户的 React 或者 Vue 代码经过 Webpack 进⾏打包。而后在运⾏时作了三件事情：第⼀件事情是实现了⼀个组件库，组件库须要同时给到 React 、Vue 甚⾄更加多的⼀些框架去使⽤，Taro使⽤了 Stencil 去实现了⼀个基于 WebComponents 且遵循微信⼩程序规范的组件库，第⼆、三件事是实现了⼀个⼩程序规范的 API 和路由机制，最终就能够把整个程序给运⾏在浏览器上⾯。下面，咱们主要关注实现组件库。

实现组件库：

最早容易想到的是使用 Vue 再开发一套组件库，这样最为稳妥，工做量也没有特别大。

但考虑到如下两点，官方遂放弃了此思路：

组件库的可维护性和拓展性不足。每当有问题须要修复或新功能须要添加，须要分别对 React 和 Vue 版本的组件库进行改造。
Taro Next 的目标是支持使用任意框架开发多端应用。假若未来支持使用 Angular 等框架进行开发，那么须要再开发对应支持 Angular 等框架的组件库。

那么是否存在着一种方案，使得只用一份代码构建的组件库能兼容全部的 web 开发框架呢？

Taro的选择是 Web Components。

Web Components

Web Components 由一系列的技术规范所组成，它让开发者能够开发出浏览器原生支持的组件。容许你建立可重用的定制元素（它们的功能封装在你的代码以外）而且在你的web应用中使用它们。

Web Components— 它由三项主要技术组成，它们能够一块儿使用来建立封装功能的定制元素，能够在你喜欢的任何地方重用，没必要担忧代码冲突。

Custom elements（自定义元素）：一组JavaScript API，容许您定义custom elements及其行为，而后能够在您的用户界面中按照须要使用它们。简单来讲，就是让开发者能够自定义带有特定行为的 HTML 标签。
Shadow DOM（影子DOM）：一组JavaScript API，用于将封装的“影子”DOM树附加到元素（与主文档DOM分开呈现）并控制其关联的功能。经过这种方式，您能够保持元素的功能私有，这样它们就能够被脚本化和样式化，而不用担忧与文档的其余部分发生冲突。简单来讲，就是对标签内的结构和样式进行一层包装。
HTML templates（HTML模板）： <template> 和<slot> 元素使您能够编写不在呈现页面中显示的标记模板。而后它们能够做为自定义元素结构的基础被屡次重用。

实现web component的基本方法一般以下所示：

建立一个类或函数来指定web组件的功能。
使用 CustomElementRegistry.define() 方法注册您的新自定义元素，并向其传递要定义的元素名称、指定元素功能的类、以及可选的其所继承自的元素。
若是须要的话，使用Element.attachShadow() 方法将一个shadow DOM附加到自定义元素上。使用一般的DOM方法向shadow DOM中添加子元素、事件监听器等等。
若是须要的话，使用<template> 和 <slot> 定义一个HTML模板。再次使用常规DOM方法克隆模板并将其附加到您的shadow DOM中。
在页面任何您喜欢的位置使用自定义元素，就像使用常规HTML元素那样。

示例

定义模板：

<template id="template">

  <h1>Hello World!</h1>

</template>
复制代码

构造 Custom Element：

class App extends HTMLElement {

  constructor () {

    super(...arguments)



    // 开启 Shadow DOM

    const shadowRoot = this.attachShadow({ mode: 'open' })



    // 复用 <template> 定义好的结构

    const template = document.querySelector('#template')

    const node = template.content.cloneNode(true)

    shadowRoot.appendChild(node)

  }

}

window.customElements.define('my-app', App)
复制代码

使用：

<my-app></my-app>
复制代码

使用原生语法去编写 Web Components 至关繁琐，所以须要一个框架帮助咱们提升开发效率和开发体验。业界已经有不少成熟的 Web Components 框架，Taro选择的是Stencil，Stencil 是一个能够生成 Web Components 的编译器。它糅合了业界前端框架的一些优秀概念，如支持 Typescript、JSX、虚拟 DOM 等。

建立 Stencil Component：

import { Component, Prop, State, h } from '@stencil/core'



@Component({

  tag: 'my-component'

})

export class MyComponent {

  @Prop() first = ''

  @State() last = 'JS'



  componentDidLoad () {

    console.log('load')

  }



  render () {

    return (

      <div> Hello, my name is {this.first} {this.last} </div>

    )

  }

}
复制代码

使用组件：

<my-component first='Taro' />
复制代码

在 React 中使用 Stencil

Custom Elements Everywhere 上罗列出业界前端框架对 Web Components 的兼容问题及相关 issues。在React文档中，也略微提到过在在 React 中使用 Web Components的注意事项 zh-hans.reactjs.org/docs/web-co…

在Custom Elements Everywhere 上能够看到，React 对 Web Components 的兼容问题。

翻译过来，就是说。

React 使用 setAttribute 的形式给 Web Components 传递参数。当参数为原始类型时是能够运行的，可是若是参数为对象或数组时，因为 HTML 元素的 attribute 值只能为字符串或 null，最终给 WebComponents 设置的 attribute 会是 attr="[object Object]"。

attribute和property的区别：stackoverflow.com/questions/6…

由于 React 有一套本身实现的合成事件系统，因此它不能监听到 Web Components 发出的自定义事件。

reactify-wc.js

实际上，这个高阶组件的实现是根据开源库reactify-wc修改的一个版本，reactify-wc是一个衔接 WebComponent 和 React 的库，目的是为了在React 中可以使用 WebComponent。这个修改的库就是为了解决上述所说的问题。

props

Taro的处理，采用 DOM Property 的方法传参。把 Web Components 包装一层高阶组件，把高阶组件上的 props 设置为 Web Components 的 property。

const reactifyWebComponent = WC => {

 return class Index extends React.Component {

  ref = React.createRef()

  update (prevProps) {

      this.clearEventHandlers()

      if (!this.ref.current) return



      Object.keys(prevProps || {}).forEach((key) => {

        if (key !== 'children' && key !== 'key' && !(key in this.props)) {

          updateProp(this, WC, key, prevProps, this.props)

        }

      })



      Object.keys(this.props).forEach((key) => {

        updateProp(this, WC, key, prevProps, this.props)

      })

  }

 

  componentDidUpdate () {

    this.update()

  }

 

  componentDidMount () {

    this.update()

  }

 

  render () {

    const { children, dangerouslySetInnerHTML } = this.props

    return React.createElement(WC, {

      ref: this.ref,

      dangerouslySetInnerHTML

    }, children)

}
复制代码

Event

由于 React 有一套本身实现的合成事件系统，因此它不能监听到 Web Components 发出的自定义事件。如下 Web Component 的 onLongPress 回调不会被触发：

<my-view onLongPress={onLongPress}>view</my-view>
复制代码

经过 ref 取得 Web Component 元素，手动 addEventListener 绑定事件。改造上述的高阶组件：

const reactifyWebComponent = WC => {

  return class Index extends React.Component {

    ref = React.createRef()

    eventHandlers = []



    update () {

      this.clearEventHandlers()



      Object.entries(this.props).forEach(([prop, val]) => {

        if (typeof val === 'function' && prop.match(/^on[A-Z]/)) {

          const event = prop.substr(2).toLowerCase()

          this.eventHandlers.push([event, val])

          return this.ref.current.addEventListener(event, val)

        }



        ...

      })

    }



    clearEventHandlers () {

      this.eventHandlers.forEach(([event, handler]) => {

        this.ref.current.removeEventListener(event, handler)

      })

      this.eventHandlers = []

    }



    componentWillUnmount () {

      this.clearEventHandlers()

    }



    ...

  }

}
复制代码

ref

为了解决 Props 和 Events 的问题，引入了高阶组件。那么当开发者向高阶组件传入 ref 时，获取到的实际上是高阶组件，但咱们但愿开发者能获取到对应的 Web Component。

domRef 会获取到 MyComponent，而不是 <my-component></my-component>

<MyComponent ref={domRef} />
复制代码

使用 forwardRef 传递 ref。改造上述的高阶组件为 forwardRef 形式：

const reactifyWebComponent = WC => {

  class Index extends React.Component {

    ...



    render () {

      const { children, forwardRef } = this.props

      return React.createElement(WC, {

        ref: forwardRef

      }, children)

    }

  }

  return React.forwardRef((props, ref) => (

    React.createElement(Index, { ...props, forwardRef: ref })

  ))

}
复制代码

className

在 Stencil 里咱们可使用 Host 组件为 host element 添加类名。

import { Component, Host, h } from '@stencil/core';



@Component({

  tag: 'todo-list'

})

export class TodoList {

  render () {

    return (

      <Host class='todo-list'> <div>todo</div> </Host>

    )

  }

}
复制代码

而后在使用 <todo-list> 元素时会展现咱们内置的类名 “todo-list” 和 Stencil 自动加入的类名 “hydrated”：

关于类名 “hydrated”：

Stencil 会为全部 Web Components 加上 visibility: hidden; 的样式。而后在各 Web Component 初始化完成后加入类名 “hydrated”，将 visibility 改成 inherit。若是 “hydrated” 被抹除掉，Web Components 将不可见。

为了避免要覆盖 wc 中 host 内置的 class 和 stencil 加入的 class,对对内置 class 进行合并。

function getClassName (wc, prevProps, props) {

  const classList = Array.from(wc.classList)

  const oldClassNames = (prevProps.className || prevProps.class || '').split(' ')

  let incomingClassNames = (props.className || props.class || '').split(' ')

  let finalClassNames = []



  classList.forEach(classname => {

    if (incomingClassNames.indexOf(classname) > -1) {

      finalClassNames.push(classname)

      incomingClassNames = incomingClassNames.filter(name => name !== classname)

    } else if (oldClassNames.indexOf(classname) === -1) {

      finalClassNames.push(classname)

    }

  })



  finalClassNames = [...finalClassNames, ...incomingClassNames]



  return finalClassNames.join(' ')

}
复制代码

到这里，咱们的reactify-wc就打造好了。咱们不要忘了，Stencil是帮咱们写web components的，reactify-wc 目的是为了在React 中可以使用 WebComponent。以下包装后，咱们就能直接在react里面用View、Text等组件了

//packages/taro-components/h5



import reactifyWc from './utils/reactify-wc'

import ReactInput from './components/input'



export const View = reactifyWc('taro-view-core')

export const Icon = reactifyWc('taro-icon-core')

export const Progress = reactifyWc('taro-progress-core')

export const RichText = reactifyWc('taro-rich-text-core')

export const Text = reactifyWc('taro-text-core')

export const Button = reactifyWc('taro-button-core')

export const Checkbox = reactifyWc('taro-checkbox-core')

export const CheckboxGroup = reactifyWc('taro-checkbox-group-core')

export const Editor = reactifyWc('taro-editor-core')

export const Form = reactifyWc('taro-form-core')

export const Input = ReactInput

export const Label = reactifyWc('taro-label-core')

export const Picker = reactifyWc('taro-picker-core')

export const PickerView = reactifyWc('taro-picker-view-core')

export const PickerViewColumn = reactifyWc('taro-picker-view-column-core')

export const Radio = reactifyWc('taro-radio-core')

export const RadioGroup = reactifyWc('taro-radio-group-core')

export const Slider = reactifyWc('taro-slider-core')

export const Switch = reactifyWc('taro-switch-core')

export const CoverImage = reactifyWc('taro-cover-image-core')

export const Textarea = reactifyWc('taro-textarea-core')

export const CoverView = reactifyWc('taro-cover-view-core')

export const MovableArea = reactifyWc('taro-movable-area-core')

export const MovableView = reactifyWc('taro-movable-view-core')

export const ScrollView = reactifyWc('taro-scroll-view-core')

export const Swiper = reactifyWc('taro-swiper-core')

export const SwiperItem = reactifyWc('taro-swiper-item-core')

export const FunctionalPageNavigator = reactifyWc('taro-functional-page-navigator-core')

export const Navigator = reactifyWc('taro-navigator-core')

export const Audio = reactifyWc('taro-audio-core')

export const Camera = reactifyWc('taro-camera-core')

export const Image = reactifyWc('taro-image-core')

export const LivePlayer = reactifyWc('taro-live-player-core')

export const Video = reactifyWc('taro-video-core')

export const Map = reactifyWc('taro-map-core')

export const Canvas = reactifyWc('taro-canvas-core')

export const Ad = reactifyWc('taro-ad-core')

export const OfficialAccount = reactifyWc('taro-official-account-core')

export const OpenData = reactifyWc('taro-open-data-core')

export const WebView = reactifyWc('taro-web-view-core')

export const NavigationBar = reactifyWc('taro-navigation-bar-core')

export const Block = reactifyWc('taro-block-core')

export const CustomWrapper = reactifyWc('taro-custom-wrapper-core')
//packages/taro-components/src/components/view/view.tsx

//拿View组件举个例子



// eslint-disable-next-line @typescript-eslint/no-unused-vars

import { Component, Prop, h, ComponentInterface, Host, Listen, State, Event, EventEmitter } from '@stencil/core'

import classNames from 'classnames'



@Component({

  tag: 'taro-view-core',

  styleUrl: './style/index.scss'

})

export class View implements ComponentInterface {

  @Prop() hoverClass: string

  @Prop() hoverStartTime = 50

  @Prop() hoverStayTime = 400

  @State() hover = false

  @State() touch = false



  @Event({

    eventName: 'longpress'

  }) onLongPress: EventEmitter



  private timeoutEvent: NodeJS.Timeout

  private startTime = 0



  @Listen('touchstart')

  onTouchStart () {

    if (this.hoverClass) {

      this.touch = true

      setTimeout(() => {

        if (this.touch) {

          this.hover = true

        }

      }, this.hoverStartTime)

    }



    this.timeoutEvent = setTimeout(() => {

      this.onLongPress.emit()

    }, 350)

    this.startTime = Date.now()

  }



  @Listen('touchmove')

  onTouchMove () {

    clearTimeout(this.timeoutEvent)

  }



  @Listen('touchend')

  onTouchEnd () {

    const spanTime = Date.now() - this.startTime

    if (spanTime < 350) {

      clearTimeout(this.timeoutEvent)

    }

    if (this.hoverClass) {

      this.touch = false

      setTimeout(() => {

        if (!this.touch) {

          this.hover = false

        }

      }, this.hoverStayTime)

    }

  }



  render () {

    const cls = classNames({

      [`${this.hoverClass}`]: this.hover

    })

    return (

      <Host class={cls}> <slot></slot> </Host>

    )

  }

}
复制代码

至此，组件库就实现好了。

Taro 3 部分使用的 NPM 包名及其具体做用。

NPM 包	描述
babel-preset-taro	给 Taro 项目使用的 babel preset
@tarojs/taro	暴露给应用开发者的 Taro 核心 API
@tarojs/shared	Taro 内部使用的 utils
@tarojs/api	暴露给 @tarojs/taro 的全部端的公有 API
@tarojs/taro-h5	暴露给 @tarojs/taro 的 H5 端 API
@tarojs/router	Taro H5 路由
@tarojs/react	基于 react-reconciler 的小程序专用 React 渲染器
@tarojs/cli	Taro 开发工具
@tarojs/extend	Taro 扩展，包含 jQuery API 等
@tarojs/helper	内部给 CLI 和 runner 使用辅助方法集
@tarojs/service	Taro 插件化内核
@tarojs/taro-loader	露给 @tarojs/mini-runner 和 @tarojs/webpack-runner 使用的 Webpack loader
@tarojs/runner-utils	暴露给 @tarojs/mini-runner 和 @tarojs/webpack-runner 的公用工具函数
@tarojs/webpack-runner	Taro H5 端 Webpack 打包编译工具
@tarojs/mini-runner	Taro 小程序端 Webpack 打包编译工具
@tarojs/components	Taro 标准组件库，H5 版
@tarojs/taroize	Taro 小程序反向编译器
@tarojs/with-weapp	反向转换的运行时适配器
eslint-config-taro	Taro ESLint 规则
eslint-plugin-taro	Taro ESLint 插件

总结

Taro 3重构是为了解决架构问题，还有提供多框架的⽀持。从以前的重编译时，到如今的重运行时。

同等条件下，编译时作的工做越多，也就意味着运行时作的工做越少，性能会更好。从长远来看，计算机硬件的性能愈来愈冗余，若是在牺牲一点能够容忍的性能的状况下换来整个框架更大的灵活性和更好的适配性，而且可以极大的提高开发体验。