扩展性限制: HOC并不能完全替代Mixin，一些场景下，Mixin可以而HOC做不到，比如PureRenderMixin，因为HOC无法从外部访问子组件的State，同时通过shouldComponentUpdate滤掉不必要的更新，因此，React在支持ES6Class之后提供了React.PureComponent来解决这个问题。
Ref传递问题: Ref被隔断，Ref的传递问题在层层包装下相当恼人，函数Ref能够缓解一部分(让HOC得以获知节点创建与销毁)，以致于后来有了React.forwardRef API。
WrapperHell: HOC泛滥，出现WrapperHell(没有包一层解决不了的问题，如果有，那就包两层)，多层抽象同样增加了复杂度和理解成本，这是最关键的缺陷，而HOC模式下没有很好的解决办法。
示例具体而言，高阶组件是参数为组件，返回值为新组件的函数，组件是将props转换为UI，而高阶组件是将组件转换为另一个组件。HOC在React的第三方库中很常见，例如Redux的connect和Relay的createFragmentContainer。
// 高阶组件定义 const higherOrderComponent = (WrappedComponent) => { return class EnhancedComponent extends React.Component { // ... render() { return <WrappedComponent {...this.props} />; } }; } // 普通组件定义 class WrappedComponent extends React.Component{ render(){ //.... } } // 返回被高阶组件包装过的增强组件 const EnhancedComponent = higherOrderComponent(WrappedComponent);在这里要注意，不要试图以任何方式在HOC中修改组件原型，而应该使用组合的方式，通过将组件包装在容器组件中实现功能。通常情况下，实现高阶组件的方式有以下两种:
属性代理Props Proxy。
反向继承Inheritance Inversion。
属性代理例如我们可以为传入的组件增加一个存储中的id属性值，通过高阶组件我们就可以为这个组件新增一个props，当然我们也可以对在JSX中的WrappedComponent组件中props进行操作，注意不是操作传入的WrappedComponent类，我们不应该直接修改传入的组件，而可以在组合的过程中对其操作。
const HOC = (WrappedComponent, store) => { return class EnhancedComponent extends React.Component { render() { const newProps = { id: store.id } return <WrappedComponent {...this.props} {...newProps} />; } } }我们也可以利用高阶组件将新组件的状态装入到被包装组件中，例如我们可以使用高阶组件将非受控组件转化为受控组件。
class WrappedComponent extends React.Component { render() { return <input />; } } const HOC = (WrappedComponent) => { return class EnhancedComponent extends React.Component { constructor(props) { super(props); this.state = { name: "" }; } render() { const newProps = { value: this.state.name, onChange: e => this.setState({name: e.target.value}), } return <WrappedComponent {...this.props} {...newProps} />; } } }或者我们的目的是将其使用其他组件包裹起来用以达成布局或者是样式的目的。
const HOC = (WrappedComponent) => { return class EnhancedComponent extends React.Component { render() { return ( <div> <WrappedComponent {...this.props} /> </div> ); } } } 反向继承反向继承是指返回的组件去继承之前的组件，在反向继承中我们可以做非常多的操作，修改state、props甚至是翻转Element Tree，反向继承有一个重要的点，反向继承不能保证完整的子组件树被解析，也就是说解析的元素树中包含了组件(函数类型或者Class类型)，就不能再操作组件的子组件了。
当我们使用反向继承实现高阶组件的时候可以通过渲染劫持来控制渲染，具体是指我们可以有意识地控制WrappedComponent的渲染过程，从而控制渲染控制的结果，例如我们可以根据部分参数去决定是否渲染组件。
甚至我们可以通过重写的方式劫持原组件的生命周期。
const HOC = (WrappedComponent) => { return class EnhancedComponent extends WrappedComponent { componentDidMount(){ // ... } render() { return super.render(); } } }