Fully explain why React high-level components implemented using reverse inheritance cannot guarantee that the complete subcomponent tree is parsed.

one of the implementations of React high-level components: reverse inheritance 

function hoc (Component) {
    return class extends Component {
        render() {
            return super.render()
        }
    }
}

will have such a related introduction:

reverse inheritance does not guarantee that the complete subcomponent tree will be parsed

who can fully explain what this is asking?

Javascript react.js
Dec.31,2021 
import React, { Component } from 'react';

const MyFuncComponent = (props)=>{
    return (
        <div>Hello World</div>
    );
}

class MyClassComponent extends Component{

    render(){
        return (
            <div>Hello World</div>
        )
    }

}

class WrappedComponent extends Component{
    render(){
        return(
            <div>
                <div>
                    <span>Hello World</span>
                </div>
                <MyFuncComponent />
                <MyClassComponent />
            </div>

        )
    }
}

const HOC = (WrappedComponent) =>
    class extends WrappedComponent {
        render() {
            const elementsTree = super.render();
            return elementsTree;
        }
    }

export default HOC(WrappedComponent);


We can see that the span under the parsed element tree (element tree), div can be fully parsed, but both MyFuncComponent and MyClassComponent are of component type, and their subcomponents cannot be fully parsed.

I hope to adopt it! Thank you!

two major features of reverse inheritance: rendering hijacking and controlling state
reverse inheritance means that the life cycle of a component is didmount "hoc didmount" will unmount hoc will unmount
in the reverse inheritance method, higher-order components can use the reference of wrapcomponent, that is to say, it can use the state props lifecycle render method of wrapcomponent

you know that reverse inherited rendering hijacking can control the rendering process of wrap component, that is, you can add, delete or modify the results of the element tree or output during this process

the point is that if the rendered element tree contains function components, you will not be able to manipulate the subcomponents of the component

.

at this time, the returned component is not a complete component

Previous: Why Taro subcomponents cannot be rendered

Next: How does Java: compare objects efficiently?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu