react 高阶组件

先介绍一下高阶这个词，我们知道js里面有高阶函数，比如map、some、reduce和sort等，那么高阶组件就是输入react组件，返回一个新的react组件。
实现高阶组件有两种方式

• 属性代理
• 反向继承
  下面看第一种方式，属性代理

1. 属性代理

<div>
   <Hocomp name={'linjian'} age={19}></Hocomp>
</div>

class List extends Component{
    constructor() {
        super();
    }
    render() {
        return (
            <ul>
                <li>{this.props.name}</li>
                <li>{this.props.age}</li>
                <li>{this.props.detail}</li>
            </ul>  
        )
    }
}

const HocConstructor = (List) => {
    return class extends Component {
        render() {
            const newProps = {detail: '这是高阶组件测试'}
            return <List {...this.props} {...newProps}></List>
        }
    }
}

export default HocConstructor(List)

也可以通过 Es7的decorate

@HocConstructor
class List extends Component{
    constructor() {
        super();
    }
    componentDidMount() {
        console.log('Hoc did')
    }
    render() {
        return (
            <ul>
                <li>{this.props.name}</li>
                <li>{this.props.age}</li>
                <li>{this.props.detail}</li>
            </ul>  
        )
    }
}


// export default HocConstructor(List)


export default List

2. 反向继承

const HocConstructor = (List) => {
    // 反向继承
    return class extends List {
        render() {
            return super.render();
        }
    }
}

此时，我们也可以注入新属性

  return class extends List {
        render() {
            const elementTree = super.render();
            const newProps = {
                detail: '这是反向继承',
            }
            const props = Object.assign({}, elementTree.props, newProps)
            const newElementTree = React.cloneElement(elementTree, props, elementTree.props.children);
            return newElementTree;
        }
    }