介绍
高阶组件（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);
