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
children
The processing of
- Passing in more than one son will
props.children
Processing to an array - Passing in a son will
props.children
Treat as an object - No incoming son will
props.children
isundefined
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
- According to the
vdom
The type of creatingReal elements
- According to
props
updateReal elements
The properties of the - At last,
props.children
To 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