深入Preact源码（一）jsx要转化成virtualDOM发生了什么

本文和自己在掘金的同步

jsx要转化成virtualDOM，首先经过babel，再经过h函数的调用形成virtualDOM。具体如下

源码链接 ./src/h.js

相当于react得createElement()，jsx经过babel转码后是h的循环调用，生成virtualDOM。

// jsx
<div>
<span className="sss" fpp="xxx">123</span>
<Hello/>
<span>xxx</span>
</div>

// h结果
h(
  "div",
  null,
  h(
    "span",
    { className: "sss", fpp: "xxx" },
    "123"
  ),
h(Hello, null),
  h(
    "span",
    null,
    "xxx"
  )
);

通过源码中h的函数定义也可以看见。h的函数第一个参数是标签名（如果是组件类型的化就是组件名）、第二个参数是属性值的key-value对象，后面的参数是所有子组件。

vnode的结构

h函数会根据子组件的不同类型进行封装，具体如下
- bool 返回 null
- null 返回 “”
- number 返回 String(number)

最后赋值给child变量并存进childdren数组中，再封装成下面的vnode结构并返回

{
    nodeName:"div",//标签名或者函数（自定义组件）
    children:[],//子组件组成的数组，每一项也是一个vnode
    key:"",//key
    attributes:{}//jsx的属性
}