taro渲染原理浅析（持续更新）

首先上一张图，React写了最基础的2个div元素，编译为微信小程序包之后

所有的页面文件都被编译为一个固定的wxml文件内容，如下：

<import src="../../base.wxml"/>
<template is="taro_tmpl" data="{{root:root}}" />

查看微信小程序文档关于template介绍，

base.xml文件又定义了所有要用到的dom元素结构，

那么核心的元素渲染逻辑都是依赖data数据，根据template动态渲染

那么root是什么样子呢？很好奇，js被编译成了什么样？

那么我们如何读js文件内容，当然一眼能看到的是我所定义的两个div元素和样式；还有useState定义的数据，如下：

s.a = function Test() {
        var e = Object(a.useState)("1"),
          s = Object(n.a)(e, 2),
          t = s[0];
        return s[1], Object(r.jsx)("div", {
          className: "page-test",
          children: Object(r.jsx)("div", {
            className: "container",
            children: t
          })
        })

解读 Object(r.jsx)