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。