1. The React file:

  • titleWill bebabelTranslated intoVirtual dom
// index.js file introduced in HTML

import React from "./react";       / / 1.
import ReactDom from "./react-dom" / / 2.
const title = (
    <h2 className = 'title'>
        <span> hello React</span>
    </h2> );
// The above code will be escaped by Babel into the following object which is called the virtual DOM
/*
var title = React.createElement("h2", {
 className: "title"
}, " hello React ");
*/
console.log(title);
Copy the code
  • Now let’s look at the introductionReact:
// react/index.js

const React  = {
    createElement
}
function createElement(tag,attrs,... children) {
    return{
        tag,
        attrs,
        children
    }
}
export default React
Copy the code

After compiling, open your browser and see localhost:1234 port:

2.ReactDom render method:

1. String:

In the index.js file, modify as follows:

import React from "./react";
import ReactDom from "./react-dom";
const title = (
    <h2 className = 'title'>
        <span> hello React</span>
    </h2> );
// The above code will be escaped by Babel into the following object which is called the virtual DOM
/*
var title = React.createElement("h2", {
 className: "title"
}, " hello React ");
*/
console.log(title);
// Test if the render method is a string
ReactDom.render(Hello world..document.querySelector("#root"))
Copy the code

Then take a look at the react-dom code:

  • And it saysReactSimilarly, there’s one in hererenderMethod, needTwo parameters:
    • vDomVirtual dom:
    • container: node
// react-dom/index.js

const ReactDom = {
    render
}
function render(vDom,container){
    if (vDom==="undefined") return ;
    if(typeof vDom === "string") {const text = document.createTextNode(vDom);
         returncontainer.appendChild(text); }}export default ReactDom;

Copy the code

Test results:

2. Virtual DOM object

In the Render method of ReactDom, the main processing is for the virtual DOM object, the purpose is to first process a layer, then recursive operation ~!! X3 (Important things say 3 times)

  • const {tag,attrs} = vDom;Deconstruct the corresponding values.
  • Go through all of themattrsThrough thesetAttributesmethodsSet properties.
  • setAttrubutesmethodattrsIs converted todomProperties.
  • Then go to thevDomThe child nodes of thechildrenAnd thenRecursive calls.
const ReactDom = {
    render
}
function render(vDom,container){
    // If vDom is undefined or a string
    if (vDom==="undefined") return ;
    if(typeof vDom === "string") {const text = document.createTextNode(vDom);
         return container.appendChild(text);
    }
  
    // Virtual DOM object
    const {tag,attrs} = vDom;
    const dom = document.createElement(tag);
    if(attrs){
        Object.keys(attrs).forEach(key= >{
            const value = attrs[key]
            setAttribute(dom,key,value)
        })
    }
    // Recursively render child nodes
    vDom.children.forEach(child= >{
        render(child,dom)
    })
    return container.appendChild(dom);
}
// Set the properties
function setAttribute(dom,key,value){
    // Convert the attribute name className to class
    if(key === "className"){
        key = "class"
    }
    // If the event is onClick onBlur
    if(/on\w+/.test(key)){
        / / lowercase
        key = key.toLowerCase();
        dom.key = value || ""
    }else if(key ==="style") // Style can be either a value or an object
    {
        if(! value ||typeof value === "string")
        {
            dom.style.cssText = value || "";

        }else if(value && typeof  value === "object")
        {
            // {width:20} is value, key is width
            for(let k in value)
            {
                if(typeof value[k] ==="number")
                {
                    dom.style[k] = value[k] +"px";
                }else{ dom.style[k] = value[k]; }}}}else
    {    // Other attributes
        if(key in dom)
        {
            dom[key] = value || "";
        }
        if(value)
        {
            dom.setAttribute(key,value)
        }
        else
        {
            dom.removeAttribute(key)
        }
    }
}
export default ReactDom;

Copy the code

The results are as follows: