React HOC（高阶组件）

首先打个广告，系列文章：

1. 古老的React mixins
2. HOC（高阶组件）
3. render props
4. React Hooks

下面进入正题：

什么是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。

转载于:https://juejin.im/post/5ce53c636fb9a07efc4960b5