react rendering

React rendering

How JSX generating element

    return(
        <div className="box">
            <div> header </div>
            hello world
        </div>
    )

He will go through the babel compiled into an expression React.createElement

return(
    React.createElement(
        'div',
        {className:'box'},
        React.createElement(
            'div',
            null,
            'header'
        ),
        'hello world'
    )
)

createElement()It is used to form a virtual DOM tree

The three parameters createElement

1. type -> tag

2. attributes => Properties tab, if not, it may be null

3. Child node children => tag

The final element of the value of the object

{
    type:'div',
    props:{
        className:'box',
        children:[
            {
                type: "div",
                props:{
                    children:"header"
                }
            },
            "Hello world"
        ]
    }
}

How to generate real element node

Of which ReactDOMComponent etc., belonging to a private class React, React their own use, not exposed to the user
commonly used are: mountComponent, updateConponent, etc., and the life cycle of our custom function and render functions are in the private class method It is called in

ReactDOMComponent role

ReactDOMComponent mountComponent the method, the role of this method are: the transfer element into real DOM node, and inserted into the respective container, and then returns markup (realDOM)

Simple implementation

{
    type: 'div',
    props: {
    className: 'box',
      children: 'Hello world',
    }
}

mountComponent(container) {
  const domElement = document.createElement(this._currentElement.type);
  const textNode = document.createTextNode(this._currentElement.props.children);

  domElement.appendChild(textNode);
  container.appendChild(domElement);
  return domElement;
}

ReactCompositeComponentWrapper role

This class mountComponentmethod role: Examples of custom components, and finally through a recursive call ReactDOMComponentof mountComponenta method to obtain real DOM.

Rendering Rules