React source code (1) : VDOM?

• HTML is written with 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> // a react component class Tag extends React.Component {constructor() {
      super();
      this.state = {
        value: "5"
      };
    }
    render() {
      return React.createElement("div", null, this.state.value); }} // createElement generates vDOMlet vdom = React.createElement(
    "div",
    {
      onClick: function() {
        console.log("click"); }},"This is a tag.", React.createElement(Tag) ); // render to the page reactdom.render (vdom, document.getelementbyid ("app"));
</script>
Copy the code

So that’s a simple way to use it, and we can see what vDOM is, json.stringfy

{
  "$$typeof": "Symbol(react.element)"."type":"div"."key":null,
  "ref":null,
  "props": {"children": ["This is a 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":{}
}
Copy the code

• typeRepresents the name of the tag or yoursreactcomponent
• propsAre the events and properties of the component
• childrenIt means it’s a child element. It could bestringOr it could be onevdom

React ReactDOM. Render ReactDOM. ReactDOM. Render ReactDOM. Now that you know what a VDOM is, you can try implementing your own in the next section

Making the address