7.Hoc实践

1.属性代理（Props Proxy）

• 操作props
• 抽象state
• 获取ref
• 用其他组件包裹（功能集成/样式包裹）

简而言之： 修改传入组件的props.
使用姿势常常是这样的：

const ppHoc = WrappedComponent => class extends React.Component {
    render() {
        // 此处可以修改props,或者注入state，
        // 总之对WrappedComponent而言就是修改了props
        return  <WrappedComponent {...this.props} />
    }
}

2.反向继承（Inheritance Inversion）

• 渲染劫持 render hijacking
• 操纵state

使用姿势常常是这样的:

const iiHoc = WrappedComponent => class extends WrappedComponent{
    render() {
        const elementTree = super.render();
        const { props } = elementTree;
        // 可以修改props
        const newProps = {aa: 1};

        return React.cloneElement(elementTree, {...props, ...newProps}, elementsTree.props.children)
    }
}

继承该组件，可基于其elementTree进行修改。能力更强，但风险也更高。

不能保证完整的子组件树被解析， 以及静态方法不会被继承。