介紹

高階組件（HOC）是 React 中用于復(fù)用組件邏輯的一種高級技巧。HOC 自身不是 React API 的一部分，它是一種基于 React 的組合特性而形成的設(shè)計(jì)模式。

React 官網(wǎng)對高階組件的定義描述得很清楚。高階組件不是 React 所獨(dú)有的，它只是一種設(shè)計(jì)模式，簡單來說就是為了復(fù)用代碼而對組件進(jìn)行封裝。

要搞清楚高階組件，先得了解下高階函數(shù)，這樣一類比下就很容易理解了。

• 高階函數(shù)：函數(shù)的參數(shù)或者返回值為函數(shù)，這個(gè)函數(shù)就是高階函數(shù)。
• 高階組件：函數(shù)的參數(shù)為組件，返回一個(gè)組件，這個(gè)函數(shù)就是高階組件。

高階函數(shù)

高階函數(shù)（Higher Order Function），按照定義，是至少滿足下列一個(gè)條件的函數(shù)：

• 函數(shù)作為參數(shù)傳入
• 返回值為一個(gè)函數(shù)

參數(shù)為函數(shù)的例子：

let pow = function square(x) {
    return x * x;
};

let array = [1, 2, 3, 4, 5, 6, 7, 8];
let newArr = array.map(pow); //直接傳入一個(gè)函數(shù)
let newArr = array.map((item) => {return item * item}); //傳入一個(gè)箭頭函數(shù)
//返回的一個(gè)函數(shù)
alert(newArr); // [1, 4, 9, 16, 25, 36, 49, 64]

返回值為函數(shù)的例子：

/* 函數(shù)柯里化 */
let add = function(x) {
    return function(y) {
      return function(z){
        return x+y+z;
      };
    };
};

高階組件

高階組件（Higher Order Component），是滿足下列所有個(gè)條件的函數(shù)：

• 組件作為參數(shù)傳入
• 返回值為一個(gè)組件

包裹組件

// A/index.js

import React from 'react';
import './index.css';

// 定義一個(gè)函數(shù)
// 傳入一個(gè)組件作為參數(shù)
function A(WrappedComponent) {
  // 返回一個(gè)組件
  return class A extends React.Component {
    constructor (props) {
      super(props);
      this.state = {};
    }

    render () {
      return (
        <div className="a-container">
           <div className="header">
             <div className="title">提示</div>
             <div className="close">X</div>
           </div>
           <div>
             <!-- 在這里使用一下 -->
             <WrappedComponent />
           </div>
         </div>
      )
    }
  }
}

export default A

內(nèi)部組件

// B/index.js

import React from 'react';
import A from '../A/index.js';
import './index.css';


class B extends React.Component {
    render() {
        return (
            <div className="wrap">
                <img src="https://xxx.xxx.png" alt="" />
            </div>
        );
    }
}

<!--調(diào)用A()方法去包裹我們的B組件。-->
export default A(B);