table of Contents
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
type -> tag
attributes => Properties tab, if not, it may be null
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 mountComponent
method role: Examples of custom components, and finally through a recursive call ReactDOMComponent
of mountComponent
a method to obtain real DOM.
Rendering Rules