React中的高阶组件

2018-12-04 07:05:38来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

高阶组件(HOC, High-Order Component)是React中用于重组组件逻辑的高级技术,是一种编程模式而不是React的api。

直观来讲,高阶组件是以某一组件作为参数返回一个新组件的函数

 

高阶函数

要了解高阶组件,首先我们要了解下什么是高阶函数!

  特征:

  1. 函数可以作为参数传递;

  2. 函数可以作为返回值被输出;

 

高阶组件目的与意义减少重复

重复是优秀系统设计的大敌 --Robert C.Martin

 

在React中使用高阶组件的方法:

  1. HOComponent(WrappedComponent, [args])

  2. @HOComponent // 装饰器模式

 

高阶组件的应用

  1. 代理方式

   操作prop/抽取状态/访问ref/包装组件

    示例: 

export default () => WrappedComponent => class A extends React.Component {
  render() {
    return <WrappedComponent {...this.props} />
  }
}

 

  2. 继承方式

    操作prop/操作生命周期函数

    示例:

export default () => WrappedComponent => class A extends WrappedComponent {
  render() {
    return super.render()
  }
}

 注:优先考虑组合,其次考虑继承

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:JavaScript用法

下一篇:原型、原型链