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

标签: Preact 源码
5人阅读 评论(0) 收藏 举报
分类:

本文和自己在掘金的同步

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的属性
}
查看评论

深入理解 JSX

JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。React 可以用来做简单的 JSX 句法转换。 为什么要使用 JSX? 你不需要为了 React 使用 JSX,可以...
  • xiangzhihong8
  • xiangzhihong8
  • 2016-08-06 21:09:07
  • 697

《深入理解计算机系统》——Hello world到底经历了什么?

最近开始在看《深入理解计算机系统》,因为虽然每天在写代码,但实在有太多不明白的东西,很想从底层了解,写完的代码到底经历了怎样一段旅程,最终达到了页面上的效果,否则总觉得自己在闭着眼睛写代码,眼不盲心却...
  • orange_linmama
  • orange_linmama
  • 2016-05-29 01:30:07
  • 856

当你在浏览器输入网址发生了什么

1.输入网址 www.php.net http 默认访问的是80端口 https 默认访问的是443端口 2.DNS 1.在浏览器的缓存里查找 2.如果没有,就去查看h...
  • u010403842
  • u010403842
  • 2017-02-26 16:10:50
  • 1437

js中new一个函数的时候,到底发生了什么

function x(){             debugger             this.w=1             this.a()         }         ...
  • THEANARKH
  • THEANARKH
  • 2016-07-20 02:02:04
  • 1983

深入Preact源码分析(四)setState发生了什么

setState发生了什么 setState(state, callback) { let s = this.state; if (!this.prevState) this.p...
  • flytam
  • flytam
  • 2018-04-17 21:12:04
  • 4

聊聊计算机启动时都发生了什么

聊聊计算机启动时都发生了什么 (资料来源:leetcode , 度娘等,还有些自己的语言整合,纯属个人聊聊) 介绍下基本输入输出系统 * 1)BIOS(Basic I/O system) ...
  • weixin_38739799
  • weixin_38739799
  • 2017-10-08 22:08:03
  • 87

我想要什么

希望三年后,我可以有自己的书房,有自己的书桌......不知道三年后的我,看到这篇文章会是怎么样的心境。...
  • u011459347
  • u011459347
  • 2013-08-22 10:58:03
  • 328

我知道你不知道我知道

2013.1.29 空虚寂寞冷 去玩放不开,发奋心不静。 (任务甚多,android s12 ad9 c# linux k60 algorithm,zy,nxj) 纠结de:项目,竞赛,承诺,你。...
  • MetalSeed
  • MetalSeed
  • 2012-09-09 23:52:02
  • 1023

我想要的工具

编程这些年,有一些问题,一直没有找到好的。 1. 动态lex&yacc.  现在的lex&yacc,都是静态的。如果哪位知道有动态的,请告知我。多谢。 2. 从实体模型到界面的自动化界面的生成工具...
  • haoyujie
  • haoyujie
  • 2015-06-01 16:11:59
  • 391
    个人资料
    持之以恒
    等级:
    访问量: 6987
    积分: 491
    排名: 10万+
    文章存档