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。