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

通过反向担任实现

function styleHOC(WrappedComponent) {  
  return class extends WrappedComponent {  
    render() {  
      return <div>  
        <div className="title">{this.props.title}</div>  
        {super.render()}  
      </div>  
    }  
  }  
} 

前提渲染

按照特定的属性抉择原组件是否渲染

通过属性署理实现

function visibleHOC(WrappedComponent) {  
  return class extends Component {  
    render() {  
      if (this.props.visible === false) return null;  
      return <WrappedComponent {...props} />;  
    }  
  }  
} 

通过反向担任实现

function visibleHOC(WrappedComponent) {  
  return class extends WrappedComponent {  
    render() {  
      if (this.props.visible === false) {  
        return null  
      } else {  
        return super.render()  
      }  
    }  
  }  
} 

操纵props

可以对传入组件的props举办增进、修改、删除可能按照特定的props举办非凡的操纵。

通过属性署理实现

function proxyHOC(WrappedComponent) {  
  return class extends Component {  
    render() {  
      const newProps = {  
        ...this.props,  
        user: 'ConardLi'  
      }  
      return <WrappedComponent {...newProps} />;  
    }  
  }  
} 

获取refs

高阶组件中可获取原组件的ref，通过ref获取组件气力，如下面的代码，当措施初始化完成后挪用原组件的log要领。(不知道refs怎么用，请👇Refs & DOM)

通过属性署理实现

function refHOC(WrappedComponent) {  
  return class extends Component {  
    componentDidMount() {  
      this.wapperRef.log()  
    }  
    render() {  
      return <WrappedComponent {...this.props} ref={ref => { this.wapperRef = ref }} />;  
    }  
  }  
} 

这里留意：挪用高阶组件的时辰并不能获取到原组件的真实ref，必要手动举办转达，详细请看转达refs

状态打点

（编辑：湖南网）

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