完整解释下使用反向继承实现的React高阶组件为什么不能保证完整的子组件树被解析？

Question

React 高阶组件的实现方案之一： 反向继承

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

都会有这样相关的介绍：

反向继承不能保证完整的子组件树被解析

谁能完整解释下这是问什么？

Answer 1

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);

我们可以查看解析的元素树(element tree)，div下的span是可以被完全被解析的，但是MyFuncComponent和MyClassComponent都是组件类型的，其子组件就不能被完全解析了。

望采纳！谢谢！

Answer 2

反向继承的两大特点：渲染劫持和控制state
反向继承意味着组件的生命周期是didmount→ hoc didmount→will unmount→hoc will unmount
在反向继承方法中高阶组件可以用wrapcomponent 的引用，也就是说它可以用wrap component的state props lifecycle render 方法

你知道的反向继承的渲染劫持可以控制 wrap component的渲然过程也就是说在这个过程中你可以对元素树或输出的结果做增删改等操作

重点来了 假如渲染的元素树中包含了function components 这时候就不能够操作组件的子组件了

这时候返回的组件就不是完整的组件了