# 1. HOC的概念
其实如果有过React开发经验的小伙伴对HOC的概念应该就不陌生了，不过既然是介绍它的话，那也稍微正式一点：
HOC，全称Higher-Order Components，即高阶组件。
它的概念应该是来源于JavaScript的高阶函数，我们知道高阶函数就是接受函数作为输入或者输出的函数。
通俗来说就是一个函数，它的参数可以是一个函数，它的返回值也可以是一个函数😄，这样的函数就被称为高阶函数。
例如🌰下面的这两个函数：
// 1. 参数为函数
const test1 = fn => {
setTimeout(() => fn(), 1000)
};
const log1 = () => console.log('我爱学习');
test1(log1); // 1s后打印
// 2. 返回值为函数
const test2 = () => {
const log2 = name => console.log(name);
return log2;
}
test2()('学习不爱我'); // 理解打印
@前端进阶之旅: 代码已经复制到剪贴板
那么其实，高阶组件它也仅仅只是一个接受组件作为输入并返回组件的函数。认为它并不是一个新的API或者一个新的什么玩意，仅仅是一种模式吧，或者说是一种技巧，这种技巧能够帮助我们复用组件逻辑。
就像下面👇这样的用法：
让我们来创建一个FinalComponent.js
import React from 'react';
function MyHOC (WrappedComponent) {
return class extends React.Component {
render () {
return <WrappedComponent />;
}
}
}
class TestComponent extends React.Component {
render () {
return (
<div>我就是个普通的组件</div>
)
}
}
const FinalComponent = MyHOC(TestComponent);
export default FinalComponent;
@前端进阶之旅: 代码已经复制到剪贴板
在这个案例中，我做了这么几件事：
- 创建了一个名为
MyHOC的函数，它接收一个名为WrappedComponent的参数，并返回一个新的匿名组件 - 这个匿名组件的
render返回的是传递进来的WrappedComponent组件 - 之后创建了一个名为
