flytam的博客

enjoy life, enjoy Javascript.

深入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的属性
}
阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/flytam/article/details/79980721
文章标签: Preact 源码
个人分类: 前端框架
上一篇关于代码可读性的认识
下一篇深入Preact源码分析(二)virtualDOM如何变为真实dom
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭