从高阶函数到高阶组件

介绍

高阶组件（HOC）是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分，它是一种基于 React 的组合特性而形成的设计模式。

React 官网对高阶组件的定义描述得很清楚。高阶组件不是 React 所独有的，它只是一种设计模式，简单来说就是为了复用代码而对组件进行封装。

要搞清楚高阶组件，先得了解下高阶函数，这样一类比下就很容易理解了。

• 高阶函数：函数的参数或者返回值为函数，这个函数就是高阶函数。
• 高阶组件：函数的参数为组件，返回一个组件，这个函数就是高阶组件。

高阶函数

高阶函数（Higher Order Function），按照定义，是至少满足下列一个条件的函数：

• 函数作为参数传入
• 返回值为一个函数

参数为函数的例子：

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

let array = [1, 2, 3, 4, 5, 6, 7, 8];
let newArr = array.map(pow); //直接传入一个函数
let newArr = array.map((item) => {return item * item}); //传入一个箭头函数
//返回的一个函数
alert(newArr); // [1, 4, 9, 16, 25, 36, 49, 64]

返回值为函数的例子：

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

高阶组件

高阶组件（Higher Order Component），是满足下列所有个条件的函数：

• 组件作为参数传入
• 返回值为一个组件

包裹组件

// A/index.js

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

// 定义一个函数
// 传入一个组件作为参数
function A(WrappedComponent) {
  // 返回一个组件
  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

内部组件

// 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>
        );
    }
}

<!--调用A()方法去包裹我们的B组件。-->
export default A(B);