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

html引入react编写


<script src="https://cdn.bootcss.com/react/16.8.4/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.8.4/umd/react-dom.development.js"></script>

<div id="app"></div>
<script>
  // 一个react组件
  class Tag extends React.Component {
    constructor() {
      super();
      this.state = {
        value: "5"
      };
    }
    render() {
      return React.createElement("div", null, this.state.value);
    }
  }
  // createElement生成vdom
  let vdom = React.createElement(
    "div",
    {
      onClick: function() {
        console.log("click");
      }
    },
    "这是一个tag",
    React.createElement(Tag)
  );
  // render到页面
  ReactDOM.render(vdom, document.getElementById("app"));
</script>

这就是一个简单用法，我们可以看看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地址