react basic concept

Posted 2021-06-02 kongshu

This artical will display the concept of react

ReactNode vs ReactElement

let\'s see the code definition. ReactNode is a superset of ReactElement, ReactElement is an object with type, props, key

interface ReactElement<P = any, T extends string | JSXElementConstructor<any> = string | JSXElementConstructor<any>> {
        type: T;
        props: P;
        key: Key | null;
    }


type ReactText = string | number;
type ReactChild = ReactElement | ReactText;

interface ReactNodeArray extends Array<ReactNode> {}
type ReactFragment = {} | ReactNodeArray;
type ReactNode = ReactChild | ReactFragment | ReactPortal | boolean | null | undefined;

Order when React updating the virtual Dom.

See the code Sample bellow. Assume current State is 1, and we Click button, state will be setted to 2, then in RenderDemo, it will first update 2 to InnerInner, but function is not executing, then executing Inner, InnerInner by order.
After also checking the class componnet, I found order is, in render function, first it will assign values to every component(either class or function), then it will execute render in each component iterate, one by one. Before any component\'render function executing or any lifecycle methods executed, all properties and children has already been updated in parent component so the order in bellow example is innerFunction, innerFunction, innercomponnet, innerInnerComponnet

const Inner:React.FC=({children})=>{
    return (
        <div>{children}</div>
    );
}

const InnerInner=React.forwardRef<htmlDivElement,any>(({children},ref)=>{
    return (
        <>
        <div ref={ref}>{children}</div>
        </>
    );
});

interface PropsType{
    value:number;
    children?:any;
}
class InnerComponnet extends React.Component<PropsType>{

    static getDerivedStateFromProps(props:PropsType,state:any){
        console.log(`InnerComponent is ${props.value}`);
        const childValue = props.children.props.value;
        console.log(`in InnerComponent, the child props is ${childValue}`)
    }

    constructor(props:PropsType){
        super(props);
        this.state={};
    }
    
    render(){
        console.log(`render in InnerComponnet`);
        return (
            <div>{this.props.children}</div>
        )
    }
}

class InnerInnerComponnet extends React.Component<PropsType>{
    constructor(props:PropsType){
        super(props);
        this.state={};
    }

    static getDerivedStateFromProps(props:PropsType,state:any){
        console.log(`InnerInnerComponent is ${props.value}`);
    }
    
    render(){
        console.log(`render in InnerInnerComponnet`);
        return (
            <div>{this.props.value}</div>
        )
    }
}

const RenderDemo:React.FC = ()=>{
    const [state,setState]=React.useState<number>(0);
    return(
        <>
            <div className="each-example">
                <h2>Render Order Demo</h2>
                <Button onClick={()=>{setState(pre=>pre+1);console.log(`pre is ${state}`);}}>Click to increase</Button>
                <Inner>
                    <InnerInner>{state}</InnerInner>
                </Inner>

                <h2>This is class Componnet</h2>
                <InnerComponnet value={state}>
                    <InnerInnerComponnet value={state}/>
                </InnerComponnet>
            </div>
        </>
    );
}