首先打個(gè)廣告，系列文章：

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

下面進(jìn)入正題：

什么是HOC

我們寫(xiě)的純函數(shù)組件只負(fù)責(zé)處理展示，很多時(shí)候會(huì)發(fā)現(xiàn)，由于業(yè)務(wù)需求，組件需要被“增強(qiáng)”，例如響應(yīng)瀏覽器事件等。如果只有一兩個(gè)組件我們大可以全部重寫(xiě)為class形式，但如果有許多組件需要進(jìn)行相似或相同的處理（例如都響應(yīng)瀏覽器窗口改變這個(gè)事件）時(shí)，考慮到代碼的復(fù)用性，很容易想到用函數(shù)處理，HOC也正是為了解決這樣的問(wèn)題而出現(xiàn)的。

說(shuō)白了，高階組件的存在和React mixins類似，都是為了解決代碼復(fù)用的問(wèn)題。

基本原理

HOC高階組件的基本原理可以寫(xiě)成這樣：

const HOCFactory = (Component) => {
  return class HOC extends React.Component {
    render(){
      return <Component {...this.props} />
    }
  }
}

很明顯HOC最大的特點(diǎn)就是：接受一個(gè)組件作為參數(shù)，返回一個(gè)新的組件。

舉個(gè)??

我們還沿用上篇文章中響應(yīng)鼠標(biāo)事件的的??。

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是一個(gè)純函數(shù)無(wú)狀態(tài)組件
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'))

優(yōu)劣分析

優(yōu)點(diǎn)：

• 支持ES6，光這一項(xiàng)就戰(zhàn)勝了mixins
• 復(fù)用性強(qiáng)，HOC是純函數(shù)且返回值仍為組件，在使用時(shí)可以多層嵌套，在不同情境下使用特定的HOC組合也方便調(diào)試。
• 同樣由于HOC是純函數(shù)，支持傳入多個(gè)參數(shù)，增強(qiáng)了其適用范圍。

當(dāng)然HOC也存在一些問(wèn)題（不然我就不會(huì)寫(xiě)這篇文章了...）

• 當(dāng)有多個(gè)HOC一同使用時(shí)，無(wú)法直接判斷子組件的props是哪個(gè)HOC負(fù)責(zé)傳遞的。
• 重復(fù)命名的問(wèn)題：若父子組件有同樣名稱的props，或使用的多個(gè)HOC中存在相同名稱的props，則存在覆蓋問(wèn)題，而且react并不會(huì)報(bào)錯(cuò)。當(dāng)然可以通過(guò)規(guī)范命名空間的方式避免。
• 可以發(fā)現(xiàn)HOC產(chǎn)生了許多無(wú)用的組件，加深了組件層級(jí)。

所以即使React HOC（高階組件）比古老的React mixins在解決代碼復(fù)用問(wèn)題上進(jìn)步了不少，但是依然不能令人滿意。進(jìn)一步的方案，參考下篇文章：React render props。