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

React官方文档在Mixins Considered Harmful一文中提到了Mixin带来了危害：

•  Mixin 也许会彼此依靠，彼此耦合，倒霉于代码维护
•  差异的 Mixin 中的要领也许会彼此斗嘴
•  Mixin很是多时，组件是可以感知到的，乃至还要为其做相干处理赏罚，这样会给代码造成滚雪球式的伟大性

React此刻已经不再保举行使Mixin来办理代码复用题目，由于Mixin带来的危害比他发生的代价还要庞大，而且React全面保举行使高阶组件来更换它。其它，高阶组件还能实现更多其他更强盛的成果，在进修高阶组件之前，我们先来看一个计划模式。

装饰模式

装饰者(decorator)模式可以或许在不改变工具自身的基本上，在措施运行时代给对像动态的添加职责。与担任对比，装饰者是一种更精练机动的做法。

高阶组件（HOC）

高阶组件可以看作React对装饰模式的一种实现，高阶组件就是一个函数，且该函数接管一个组件作为参数，并返回一个新的组件。

高阶组件（HOC）是React中的高级技能，用来重用组件逻辑。但高阶组件自己并不是React API。它只是一种模式，这种模式是由React自身的组合性子肯定发生的。

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

上面的代码就是一个HOC的简朴应用，函数吸取一个组件作为参数，并返回一个新组件，新组建可以吸取一个visible props，按照visible的值来判定是否渲染Visible。

下面我们从以下几方面来详细试探HOC。

HOC的实现方法

属性署理

函数返回一个我们本身界说的组件，然后在render中返回要包裹的组件，这样我们就可以署理全部传入的props，而且抉择怎样渲染，现实上 ，这种方法天生的高阶组件就是原组件的父组件，上面的函数visible就是一个HOC属性署理的实现方法。

function proxyHOC(WrappedComponent) {  
  return class extends Component {  
    render() {  
      return <WrappedComponent {...this.props} />;  
    }  
  }  
} 

比拟原生组件加强的项：

•  可操纵全部传入的props
•  可操纵组件的生命周期
•  可操纵组件的static要领
•  获取refs

反向担任

返回一个组件，担任原组件，在render中挪用原组件的render。因为担任了原组件，能通过this会见到原组件的生命周期、props、state、render等，对比属性署理它能操纵更多的属性。

function inheritHOC(WrappedComponent) {  
  return class extends WrappedComponent {  
    render() {  
      return super.render();  
    }  
  }  
} 

比拟原生组件加强的项：

•  可操纵全部传入的props
•  可操纵组件的生命周期
•  可操纵组件的static要领
•  获取refs
•  可操纵state
•  可以渲染挟制

HOC可以实现什么成果

组合渲染

可行使任何其他组件和原组件举办组合渲染，到达样式、机关复用等结果。

（编辑：湖南网）

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