react源码分析(1)：vdom是个啥？

• html引入react编写

这就是一个简单用法，我们可以看看vdom到底是个啥玩意，JSON.stringfy看一下

{
  "$$typeof": "Symbol(react.element)",
  "type":"div",
  "key":null,
  "ref":null,
  "props":{
    "children":[
      "这是一个tag",
      {
        "$$typeof": "Symbol(react.element)",
        "type":"div",
        "key":null,
        "ref":null,
        "props":{"children":"555"},
        "_owner":null,"_store":{}
      },
      {
        "type": "class Tag",
        "key":null,
        "ref":null,
        "props":{},
        "_owner":null,
        "_store":{}
      }
    ]
  },
  "_owner":null,
  "_store":{}
}

• type表示标签名或者是你的react组件
• props是该组件的事件和一些属性
• children表示是子元素，可以是string，也可以是一个vdom

    可以看出所谓的vdom就是一颗树结构的对象，其实观察真实的dom树结构，你会发现两者其实没啥区别，只是react用按自己的想法有描述了一遍，ReactDOM.render就是把vdom还原成真实的dom树。
    既然知道了vdom是啥，在下一节可以试着实现一个自己的vdom

github地址