首先打个广告，系列文章：
下面进入正题：
什么是HOC
我们写的纯函数组件只负责处理展示，很多时候会发现，由于业务需求，组件需要被“增强”，例如响应浏览器事件等。如果只有一两个组件我们大可以全部重写为class形式，但如果有许多组件需要进行相似或相同的处理（例如都响应浏览器窗口改变这个事件）时，考虑到代码的复用性，很容易想到用函数处理，HOC也正是为了解决这样的问题而出现的。
说白了，高阶组件的存在和React mixins类似，都是为了解决代码复用的问题。
基本原理
HOC高阶组件的基本原理可以写成这样：
const HOCFactory = (Component) => {
return class HOC extends React.Component {
render(){
return <Component {...this.props} />
}
}
}
很明显HOC最大的特点就是：接受一个组件作为参数，返回一个新的组件。
举个🌰
我们还沿用上篇文章中响应鼠标事件的的🌰。
import React from 'react'
import ReactDOM from 'react-dom'
const withMouse = (Component) => {
return class extends React.Component {
state = { x: 0, y: 0 }
handleMouseMove = (event) => {
this.setState({
x: event.clientX,
y: event.clientY
})
}
render() {
return (
<div style={{ height: '100%' }} onMouseMove={this.handleMouseMove}>
<Component {...this.props} mouse={this.state}/>
</div>
)
}
}
}
// APP是一个纯函数无状态组件
const App = (props) => {
const { x, y } = props.mouse
return (
<div style={{ height: '100%' }}>
<h1>The mouse position is ({x}, {y})</h1>
</div>
)
}
const AppWithMouse = withMouse(App)
ReactDOM.render(<AppWithMouse/>, document.getElementById('root'))
优劣分析
优点：
- 支持ES6，光这一项就战胜了mixins
- 复用性强，HOC是纯函数且返回值仍为组件，在使用时可以多层嵌套，在不同情境下使用特定的HOC组合也方便调试。
- 同样由于HOC是纯函数，支持传入多个参数，增强了其适用范围。
当然HOC也存在一些问题（不然我就不会写这篇文章了...）
- 当有多个HOC一同使用时，无法直接判断子组件的props是哪个HOC负责传递的。
- 重复命名的问题：若父子组件有同样名称的props，或使用的多个HOC中存在相同名称的props，则存在覆盖问题，而且react并不会报错。当然可以通过规范命名空间的方式避免。
- 可以发现HOC产生了许多无用的组件，加深了组件层级。
所以即使React HOC（高阶组件）比古老的React mixins在解决代码复用问题上进步了不少，但是依然不能令人满意。进一步的方案，参考下篇文章：React render props。
