Element rendering

1.1 the React elements

The React element is the smallest unit that makes up the React application. Unlike the BROWSER DOM element, the React element is a virtual DOM generated by parsing JSX and used to simulate the real DOM. React creates a real DOM with minimal overhead from elements, where the ReactDOM is used to render and update the DOM.

1.2 Elements rendering principle

Elements are rendered by converting JSX to VDOM, generating the real DOM through a series of operations, and inserting the real DOM into the container.

Note that the React element is an immutable object, meaning that it cannot be changed once created. An individual frame, like an animation, can only represent a specific point in time. (Prior to React17, this was only the official convention that the Object should not be immutable. After React17, the entire React element was given to object.freeze () in the development environment.)

Two, source code implementation

2.1 createElement method

CreateElement is the method used to convert JSX to VDOM

  • childrenThe processing of
  1. Passing in more than one son willprops.childrenProcessing to an array
  2. Passing in a son willprops.childrenTreat as an object
  3. No incoming son willprops.childrenisundefined
function createElement(type,config,children){
	letprops = {... config};if(argument.length > 3){
		children = Array.prototype.slice.call(arguments.2).map(warpToVdom)
	}else{
        if(typeofchildren ! = ='undefined'){ props.children = warpToVdom(children); }}return {
		type,
		props
	}
}

// The React source code is special for text and numbers. It is easy to understand and wrap it as vDOM.
export const REACT_TEXT  = Symbol('REACT_TEXT');
function warpToVdom(element){
    if(typeof element === 'string' || typeof element === 'number') {return {
            type: REACT_TEXT,
            props: {content:element
            }
        }
    }else{
        returnelement; }}Copy the code

2.2 ReactDOM

The method of vDOM rendering is unified in the ReactDOM

2.2.1 render

The Render function is well understood as creating the vDOM as a real DOM and inserting the real DOM into the container

function render(vdom,container){
    let newDOM = createDOM(vdom);
    container.appendChild(newDOM);
}
Copy the code

2.2.2 createDOM Create a real DOM

  1. According to thevdomThe type of creatingReal elements
  2. According topropsupdateReal elementsThe properties of the
  3. At last,props.childrenTo see if it’s recursively executedrender
function createDOM(vdom){
    let {type,props} = vdom;
    let dom;
    // 1. Create DOM
    if(type === REACT_TEXT){
        dom = document.createTextNode(props.content);
    }else{
        dom = document.createElement(props.content);
    }
    
    if(props){
        // 2. Update properties
        updateProps(dom,{},props);
        
        // 3. Recursive rendering
        if(typeof props.children == 'object' && props.children.type){
           render(props.children,dom)
        }else if(Array.isArray(props.children)){
            reconcileChildren(props.children,dom)
        }
    }
    vdom.dom = dom
    return dom
}
Copy the code

2.2.3 updateProps Updated the properties

function updateProps(dom,oldProps,newProps){
    for(let key in newProps){
        if(key === 'children') {continue;
        }
        if(key === 'style') {let styleObj = newProps[style];
            for(let attr in styleObj){
                dom.style[attr] = styleObj[sttr]
            }
        }else{
            dom[key] = newProps[key]
        }
    }
}
Copy the code

2.2.4 reconcileChildren

Render directly when the props. Children is an object, and iterate through the Child through the reconcileChildren in an array

function reconcileChildren(childrenVdom,parentDOM){
    for(let i=0; i<childrenVdom.length; i++){let childVdom = childrenVdom[i];
        render(childVdom,parentDOM)
    }
}
Copy the code

2.2.5 export

Finally, export the render method

const ReactDOM = {
    render
}
export default ReactDOM;
Copy the code

Three, endnotes

This set of ideas is based on the source code of React15, and there are some differences with the current latest version of the code, because the addition of Fiber in 16 will enable virtual DOM to do incremental rendering, direct handwriting will discourage most of the new players, the reason for choosing React15 is that the rendering process is easier to understand. Of course, Fiber related content will be updated in the future. If you’re interested in Fiber, check out this — React-Fiber-Architecture. Give it a thumbs up before you go

  • React Source code