React 高阶组件
它也称为HOC。在React中，HOC是用于重用组件逻辑的高级技术。它是一个接受组件并返回新组件的函数。根据官方网站的说法，它不是React API的功能(部分)，而是一种模式，它是从React的组成性质中产生的。它们类似于用于向现有组件添加其他功能的JavaScript函数。
高阶组件函数接受另一个函数作为参数。 Map功能是了解这一点的最佳示例。这样做的主要目的是将组件逻辑分解为更简单和更小的函数，可以根据需要重复使用。
语法
const NewComponent = higherOrderComponent(WrappedComponent);
我们知道组件将props转换为UI，而高阶组件将一个组件转换为另一个组件，并允许向其中添加其他数据或功能。 Hocs 在第三方库中很常见。 HOC的示例为 Redux的连接和 Relay的createFragmentContainer 。
现在，我们可以从 HOC的工作原理中了解下面的示例。
//Function Creation
function add (a, b) {
return a + b
}
function higherOrder(a, addReference) {
return addReference(a, 20)
}
//Function call
higherOrder(30, add) // 50
在上面的示例中，我们创建了两个函数 add()和 higherOrder()。现在，我们将add()函数作为对higherOrder()函数的自变量提供。要进行调用，请在HigherOrder()函数中将其重命名为 addReference ，然后对其进行调用。
此处，您传递的函数称为回调。函数，并且传递回调函数的函数称为高阶(HOC)函数。
示例
创建一个名为HOC.js的新文件。在此文件中，我们做了一个功能HOC。它接受一个自变量作为组件。在这里，该组件是 App 。
HOC.js
import React, {Component} from 'react';
export default function Hoc(HocComponent){
return class extends Component{
render(){
return (
<div>
<HocComponent></HocComponent>
</div>
);
}
}
}
现在，将 HOC.js 文件包含到 App.js 文件中。在此文件中，我们需要调用 HOC函数。
App组件包装在另一个React组件中，以便我们可以对其进行修改。因此，它成为高阶组件的主要应用。
App.js
import React, { Component } from 'react';
import Hoc from './HOC';
class App extends Component {
render() {
return (
<div>
<h2>HOC Example</h2>
lidihuo provides best CS tutorials.
</div>
)
}
}
App = Hoc(App);
export default App;
输出
当我们执行上述文件时，它将显示如下屏幕。
高阶组件约定
请勿在组件的render方法内使用HOC。
必须复制静态方法才能访问它们。您可以使用hoist-non-react-statics软件包来自动复制所有非React静态方法。
HOC对引用不起作用，因为"引用"不作为参数或自变量传递。如果将ref添加到HOC组件中的元素，则该ref引用最外层容器组件的实例，而不是包装的组件。
