首页 > > 网页制作 > Javascript >

React中的高阶组件

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

高阶组件（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
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

热门词条

最新资讯

热门关注

热门标签