本文和自己在掘金的同步

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的屬性
}