【React深入】从Mixin到HOC再到Hook(4)

将原组件的状态提取到HOC中进行管理，如下面的代码，我们将Input的value提取到HOC中进行管理，使它变成受控组件，同时不影响它使用onChange方法进行一些其他操作。基于这种方式，我们可以实现一个简单的双向绑定，具体请看双向绑定。

通过属性代理实现

function proxyHoc(WrappedComponent) {  
  return class extends Component {  
    constructor(props) {  
      super(props);  
      this.state = { value: '' };  
    }  
    onChange = (event) => {  
      const { onChange } = this.props;  
      this.setState({  
        value: event.target.value,  
      }, () => {  
        if(typeof onChange ==='function'){  
          onChange(event);  
        }  
      })  
    }  
    render() {  
      const newProps = {  
        value: this.state.value,  
        onChange: this.onChange,  
      }  
      return <WrappedComponent {...this.props} {...newProps} />;  
    }  
  }  
}  
class HOC extends Component {  
  render() {  
    return <input {...this.props}></input>  
  }  
}  
export default proxyHoc(HOC); 

操作state

上面的例子通过属性代理利用HOC的state对原组件进行了一定的增强，但并不能直接控制原组件的state，而通过反向继承，我们可以直接操作原组件的state。但是并不推荐直接修改或添加原组件的state，因为这样有可能和组件内部的操作构成冲突。

通过反向继承实现

function debugHOC(WrappedComponent) {  
  return class extends WrappedComponent {  
    render() {  
      console.log('props', this.props);  
      console.log('state', this.state);  
      return (  
        <div className="debuging">  
          {super.render()}  
        </div>  
      )  
    }  
  }  
} 

上面的HOC在render中将props和state打印出来，可以用作调试阶段，当然你可以在里面写更多的调试代码。想象一下，只需要在我们想要调试的组件上加上@debug就可以对该组件进行调试，而不需要在每次调试的时候写很多冗余代码。(如果你还不知道怎么使用HOC，请👇如何使用HOC)

渲染劫持

高阶组件可以在render函数中做非常多的操作，从而控制原组件的渲染输出。只要改变了原组件的渲染，我们都将它称之为一种渲染劫持。

实际上，上面的组合渲染和条件渲染都是渲染劫持的一种，通过反向继承，不仅可以实现以上两点，还可直接增强由原组件render函数产生的React元素。

（编辑：ASP站长网）