React中的高阶组件

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

高阶组件（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()
}
}

注：优先考虑组合，其次考虑继承