【React深入】从Mixin到HOC再到Hook

将原组件的状态提取到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元素。

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!