前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >深入Preact源码(一)jsx要转化成virtualDOM发生了什么

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

作者头像
ACK
发布2020-01-14 17:14:00
5340
发布2020-01-14 17:14:00
举报
文章被收录于专栏:flytam之深入前端技术栈

本文和自己在掘金的同步

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

源码链接 ./src/h.js

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

代码语言:javascript
复制
// 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结构并返回

代码语言:javascript
复制
{
    nodeName:"div",//标签名或者函数(自定义组件)
    children:[],//子组件组成的数组,每一项也是一个vnode
    key:"",//key
    attributes:{}//jsx的属性
}
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档