React系列之高階元件HOC實際應用指南

arcsin1發表於2018-01-17

React元件

前言

Higher-Order function（高階函式）大家很熟悉，在函數語言程式設計中的一個基本概念，它描述了這樣一種函式：這種函式接受函式作為輸出，或者輸出一個函式。比如常用的工具方法reduce，map等都是高階函式

現在我們都知道高階函式是什麼,Higher-Ordercomponents（高階元件）其實也是類似於高階函式，它接受一個React元件作為輸入，輸出一個新的React元件

Concretely, a higher-order component is a function that takes a component and returns a new component.

通俗的語言解釋：當我們用一個容器（w）把React元件包裹，高階元件會返回一個增強（E）的元件。高階元件讓我們的程式碼更具有複用性，邏輯性與抽象特。它可以對props和state進行控制，也可以對render方法進行劫持...

大概是這樣：

const EnhancedComponent = higherOrderComponent(WrappedComponent)

簡單例子：

import React, { Component } from 'react';
import ExampleHoc from './example-hoc';

class UseContent extends Component {
  render() {
    console.log('props:',this.props);
    return (
    <div>
       {this.props.title} - {this.props.name}
    </div>
    )
  }
}
export default ExampleHoc(UseContent)
複製程式碼

import React, { Component } from 'react';

const ExampleHoc = WrappedComponent => {
  return class extends Component {
    constructor(props) {
        super(props)
        this.state = {
         title: 'hoc-component',
         name: 'arcsin1',
        }
    }
    render() {
       const newProps = {
        ...this.state,
       }
       return <WrappedComponent {...this.props} {...this.newProps} />
    }
  }
}
export default ExampleHoc
複製程式碼

元件UseContent，你可以看到其實是一個很簡單的一個渲染而已，而元件ExampleHoc對它進行了增強，很簡單的功能.

應用場景

以下程式碼我會用裝飾器(decorator)書寫

屬性代理。高階元件通過被包裹的React元件來操作props

反向繼承。高階元件繼承於被包裹的React元件

1. 屬性代理

小列子說明：

import React, { Component } from 'react'
import ExampleHoc from './example-hoc'

@ExampleHoc
export default class UseContent extends Component {
  render() {
    console.log('props:',this.props);
    return (
        <div>
           {...this.props} //這裡只是演示
        </div>
    )
  }
}
複製程式碼

import React, { Component } from 'react'

const ExampleHoc = WrappedComponent => {
  return class extends Component {
    render() {
       return <WrappedComponent {...this.props} />
    }
  }
}
export default ExampleHoc
複製程式碼

這樣的元件就可以作為引數被呼叫，原始元件就具備了高階元件對它的修飾。就這麼簡單，保持單個元件封裝性的同時還保留了易用性。當然上述的生命週期如下：

didmount -> HOC didmount ->(HOCs didmount) ->（HOCs willunmount）-> HOC willunmount -> unmount

控制props

我可以讀取，編輯，增加，移除從WrappedComponent傳來的props，但是需要小心編輯和移除props。我們應該對高階元件的props作新的命名防止混淆了。

例如:

import React, { Component } from 'react'

const ExampleHoc = WrappedComponent => {
  return class extends Component {
    render() {
       const newProps = {
           name: newText,
       }
       return <WrappedComponent {...this.props}  {...newProps}/>
    }
  }
}
export default ExampleHoc
複製程式碼

通過refs使用引用

在高階元件中，我們可以接受refs使用WrappedComponent的引用。例如：

import React, { Component } from 'react'

const ExampleHoc = WrappedComponent => {
  return class extends Component {
    proc = wrappedComponentInstance => {
        wrappedComponentInstance.method()
    }
    render() {
       const newProps = Object.assign({}, this.props,{
           ref: this.proc,
       })
       return <WrappedComponent {...this.newProps} />
    }
  }
}
export default ExampleHoc
複製程式碼

當WrappedComponent被渲染的時候，refs回撥函式就會被執行，這樣就會拿到一份WrappedComponent的例項的引用。這樣就可以方便地用於讀取和增加例項props，並呼叫例項。

抽象state

我們可以通過WrappedComponent提供props和回撥函式抽象state。就像我們開始的例子，我們可以把原元件抽象為展示型元件，分離內部狀態，搞成無狀態元件。

例子：

import React, { Component } from 'react';

const ExampleHoc = WrappedComponent => {
  return class extends Component {
    constructor(props) {
        super(props)
        this.state = {
         name: '',
        }
    }
    onNameChange = e => {
        this.setState({
            name: e.target.value,
        })
    }
    render() {
       const newProps = {
         name: {
            value: this.state.name,
            onChange: this.onNameChange,
         }
       }
       return <WrappedComponent {...this.props} {...newProps} />
    }
  }
}
export default ExampleHoc
複製程式碼

在上面我們通過把input的name prop和onchange方法提到了高階元件中，這樣有效的抽象了同樣的state操作。

用法：
import React, { Component } from 'react'
import ExampleHoc from './example-hoc'

@ExampleHoc
export default class UseContent extends Component {
  render() {
    console.log('props:',this.props);
    return (
        <input name="name" {this.props.name} />
    )
  }
}
這樣就是一個受控元件
複製程式碼

其它元素包裹WrappedComponent

其它，我們可以使用其它元素包裹WrappedComponent，這樣既可以增加樣式，也可以方便佈局。例如

import React, { Component } from 'react'

const ExampleHoc = WrappedComponent => {
  return class extends Component {
    render() {
       return (
            <div style={{display: 'flex'}}>
                <WrappedComponent {...this.props} />
            </div>
       )
    }
  }
}
export default ExampleHoc
複製程式碼

2. 反向繼承

從字面意思，可以看出它與繼承相關，先看看例子：

const ExampleHoc = WrappedComponent => {
  return class extends WrappedComponent {
    render() {
       return super.render()
    }
  }
}
複製程式碼

正如看見的，高階元件返回的元件繼承與WrappedComponent，因為被動繼承了WrappedComponent，所有的呼叫都是反向。所以這就是反代繼承的由來。這種方法與屬性代理不太一樣，它通過繼承WrappedComponent來實現，方法可以通過super來順序呼叫，來看看生命週期：

didmount -> HOC didmount ->(HOCs didmount) -> willunmount -> HOC willunmount ->（HOCs willunmount）

在反向繼承中，高階函式可以使用WrappedComponent的引用，這意味著可以使用WrappedComponent的state，props,生命週期和render方法。但它並不能保證完整的子元件樹被解析，得注意。

渲染劫持

渲染劫持就是高階元件可以控制WrappedComponent的渲染過程，並渲染各種各樣的結果。我們可以在這個過程中任何React元素的結果中讀取，增加，修改，刪除props,或者修改React的元素樹，又或者用樣式控制包裹這個React元素樹。

因為前面說了它並不能保證完整的子元件樹被解析，有個說法：我們可以操控WrappedComponent元素樹，並輸出正確結果，但如果元素樹種包含了函式型別的React元件，就不能操作元件的子元件。

先看看有條件的渲染例子：

const ExampleHoc = WrappedComponent => {
  return class extends WrappedComponent {
    render() {
      if(this.props.loggedIn) { //當登入了就渲染
           return super.render()
      } else {
          return null
      }
      
    }
  }
}
複製程式碼

對render輸出結果的修改:

const ExampleHoc = WrappedComponent => {
  return class extends WrappedComponent {
    render() {
      const eleTree = super.render()
      let newProps = {}
      
      if(eleTree && eleTree.type === 'input') { 
           newProps = {value: '這不能被渲染'}
      } 
      const props = Object.assgin({},eleTree.props,newProps)
      const newEleTree = React.cloneElement(eleTree, props, eleTree.props.children)
      return newEleTree
      
    }
  }
}
複製程式碼

控制state

高階元件是可以讀取，修改，刪除WrappedComponent例項的state，如果需要的話，也可以增加state，但這樣你的WrappedComponent會變得一團糟。因此大部分的高階元件多都應該限制讀取或者增加state，尤其是增加state，可以通過重新命名state，以防止混淆。

看看例子：

const ExampleHoc = WrappedComponent => {
  return class extends WrappedComponent {
    render() {
      <div>
       <h3>HOC debugger</h3>
       <p>Props <pre>{JSON.stringfy(this.props,null,1)}</pre></p>
       <p>State <pre>{JSON.stringfy(this.state,null,2)}</pre></p>
       {super.render()}
      </div>
    }
  }
}
複製程式碼

高階元件接受其它引數

舉個列子，我把使用者資訊存在本地LocalStorage中，當然裡面有很多key，但是我不需要用到所有，我希望按照我的喜好得到我自己想要的。

import React, { Component } from 'react'

const ExampleHoc = (key) => (WrappedComponent) => {

  return class extends Component {
    componentWillMount() {
      let data = localStorage.getItem(key);
        this.setState({data});
    }

    render() {
      return <WrappedComponent data={this.state.data} {...this.props} />
    }
  }
}

複製程式碼

import React, { Component } from 'react'

class MyComponent2 extends Component {  
  render() {
    return <div>{this.props.data}</div>
  }

}

const MyComponent2WithHOC = ExampleHoc(MyComponent2, 'data')

export default MyComponent2WithHOC

複製程式碼

import React, { Component } from 'react'

class MyComponent3 extends Component {  
  render() {
    return <div>{this.props.data}</div>
  }
}
const MyComponent3WithHOC = ExampleHoc(MyComponent3, 'name')

export default MyComponent3WithHOC
複製程式碼

實際上，此時的ExampleHoc和我們最初對高階元件的定義已經不同。它已經變成了一個高階函式，但這個高階函式的返回值是一個高階元件。我們可以把它看成高階元件的變種形式。這種形式的高階元件大量出現在第三方庫中。如react-redux中的connect就是一個典型。請去檢視react-redux的api就可以知道了。

有問題望指出，謝謝！

參考：

Higher-Order Components: higher-order-components
React Higher Order Components in depth: React Higher Order Components in depth

React 重溫之高階元件（HOC）
2018-06-13
React元件
React高階指南之高階元件
2018-08-18
React元件
React 高階元件(HOC)入門指南
2017-05-12
React元件
React HOC（高階元件）
2019-05-22
React元件
React 進階之高階元件
2017-06-27
React元件
React手稿之高階元件
2018-11-15
React元件
深入React高階元件(HOC)
2018-04-23
React元件
React教程之高階元件
2019-03-15
React元件
React HOC高階元件詳解
2018-10-08
React元件
[譯]React高階話題之高階元件
2018-11-27
React元件
React中的函式子元件(FaCC)和高階元件(HOC)
2018-09-04
React函式元件
Vue 進階必學之高階元件 HOC（保姆式教學，衝擊20k必備）
2020-04-07
Vue元件
react 高階元件的理解和應用
2018-05-16
React元件
React 深入系列6：高階元件
2019-03-04
React元件
奇技淫巧 - Vue Mixins 高階元件與 Vue HOC 高階元件實踐
2019-01-02
Vue元件
奇技淫巧 – Vue Mixins 高階元件與 Vue HOC 高階元件實踐
2019-01-02
Vue元件
React 高階應用 -- 高階元件 Heigher Order Component
2019-03-31
React元件
react進階系列：高階元件詳解（三）
2017-06-27
React元件
React 中的高階元件及其應用場景
2019-02-25
React元件
React高階元件實踐
2017-09-11
React元件
React元件及應用
2020-11-09
React元件
從 0 到 1 實現 React 系列 —— 5.PureComponent 實現 && HOC 探幽
2019-02-28
React
MongoDB高階應用之高可用方案實戰（4）
2022-01-06
MongoDB
React Hooks 實用指南
2018-11-29
ReactHook
之間的區別是什麼高階元件(HOC)和繼承反應本地元件
2018-11-09
元件繼承
React 進階二-元件最佳實踐
2019-03-14
React元件
React高階元件
2020-12-27
React元件
React 高階元件
2018-03-11
React元件
React 進階系列：Hooks 該怎麼用
2019-03-18
ReactHook
React 進階(三) 高階元件
2019-03-18
React元件
React應用架構設計指南
2017-12-30
React應用架構
react高階元件的一些運用
2020-12-01
React元件
可複用 React 的 HOC 以及的 Render Props
2018-07-15
React
Dubbo之高階特性
2021-02-26
「Mybatis系列」Mybatis高階應用
2020-02-21
MyBatis
[譯] 測試 React & Redux 應用良心指南
2018-03-05
ReactRedux
React 同構應用 PWA 升級指南
2018-05-25
React
React-程式碼複用(mixin.hoc.render props)
2019-03-22
React