A, components,

Components can break up the UI into separate, reusable parts so that we only need to focus on each individual part development. The concept of a component is similar to that of a JS function, which takes arbitrary inputs (” props “) and returns a React element that describes what the page displays.

The React component

2.1 Functional Components

A functional component is a component that is defined by writing JavaScript functions. It is implemented by taking a props object and returning a React element.

function Welcome(props){
    return <h1>Hello,{props.name}</h1>
}

// <Welcome name='Tom'></Welcome>
Copy the code

2.2 class components

Class components are components defined through ES6’s classes. Class components have some additional features over function components, which we’ll cover in the next component update.

class Welcome extends React.Component {
    render(){
        return <h1>Hello,{this.props.name}</h1>}}Copy the code

The initial rendering of the two components is equivalent

Three, the initial rendering principle of components

React components are divided into two types: built-in native components, such as div, P, and SPAN, whose type is a string; and custom components, whose type is a function

3.1 Functional Components

The result of compiling the function component

  • $$typeof: Symbol(react.element)On behalf of theJSXIs a component
  • The incomingnameWill be hanging onprops 上
  • typeThe value of the property is a function

3.2 class components

  • Class components need to be aware oftypeThe prototype ofisReactComponentProperty is used to identify whether the element is a class component

3.3 Initial rendering principle of components

// Continuing with the previous article, modify the createDOM code
function createDOM(vdom){
    let {type,props} = vdom;
    let dom;
    if(type === REACT_TEXT){
        dom = document.createTextNode(props.content);
    }else if(typeof type === 'function') {/ / component
        if(type.isReactComponent){  / / class components
            return mountClassComponent(vdom);
        }else{ 						// Function components
            returnmountFunctionComponent(vdom); }}else{
        dom = document.createElement(props.content);
    }
    
    if(props){
        updateProps(dom,{},props);
        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

3.4 Mounting Function Components

Function components are mounted by passing the vDOM from the type execution into createDOM to generate the real DOM

function mountFunctionComponent(vdom){
    const [type,props] = vdom;
    const renderVdom = type(props);
    return createDOM(renderVdom);
}
Copy the code

Category 3.5 Component Mounting

The class Component’s parent Component stereotype has an attribute isReactComponent value that is an empty object

3.5.1 track ofComponentclass

Component.js implements the simple Component class

export class Component {
    static isReactComponent = {}	// Used to identify class components
    constructor(props){
        this.props = props
    }
}
Copy the code

3.5.2 Mounting Class Components

To mount a class component, use the render method of the instance to generate the VDOM, and pass the vDOM to createDOM to generate the real DOM

function mountClassComponent(vdom){
    const [type,props] = vdom;
    const classInstance = new type(props);
    const renderVdom = classInstance.render(renderVdom);
    return renderVdom
}
Copy the code
  • React Source code