上一章ReactJS实战教程请查看：React使用表格结构化数据
高阶组件也被称为HOC，在React中，HOC是一种重用组件逻辑的高级技术，它是一个获取组件并返回新组件的函数。据官方网站介绍，这并不是React API的功能(部分)，而是一种从React的组合特性中产生的模式，它们类似于用于向现有组件添加附加功能的JavaScript函数。
高阶组件函数接受另一个函数作为参数，map函数是理解这一点的最佳示例。这样做的主要目的是将组件逻辑分解为更简单、更小的函数，可以根据需要重用这些函数。
语法
const NewComponent = higherOrderComponent(WrappedComponent);
我们知道组件将props转换为UI，而高阶组件将组件转换为另一个组件，并允许向其中添加额外的数据或功能。hoc在第三方库中很常见，hoc的例子是Redux的connect和Relay的createFragmentContainer。
现在，我们可以通过下面的示例了解hoc的工作原理。
//函数创建
function add (a, b) {
return a + b
}
function higherOrder(a, addReference) {
return addReference(a, 20)
}
//方式调用
higherOrder(30, add) // 50在上面的例子中，我们创建了两个函数add()和higherOrder()，现在，我们提供add()函数作为higherOrder()函数的参数。对于调用，将其重命名为higherOrder()函数中的addReference，然后调用它。
这里，传递的函数称为回调函数，传递回调函数的函数称为高阶(HOCs)函数。
例子
创建一个名为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 = Hoc(App);
应用程序组件包装在另一个React组件中，以便我们可以修改它。因此，它成为高阶组件的主要应用。
【React高阶组件用法 – ReactJS实战教程】App.js
import React, { Component } from 'react';
import Hoc from './HOC';
class App extends Component {
render() {
return (
<
div>
<
h2>HOC例子<
/h2>
srcmini - 开发教程网.
<
/div>
)
}
}
App = Hoc(App);
export default App;
高阶组件约定
- 不要在组件的render方法中使用hoc。
- 必须复制静态方法才能访问它们，你可以使用hoist-non-react-statics软件包来自动复制所有非反应静态方法。
- HOC不适用于refs，因为“refs”不作为参数或参数传递。如果将ref添加到HOC组件中的元素，则该ref引用最外层容器组件的实例，而不是包装组件。
推荐阅读
- React使用代码分离 – ReactJS实战教程
- React使用表格结构化数据 – ReactJS实战教程
- React map函数用法介绍 – ReactJS实战教程
- React集成Bootstrap框架 – ReactJS实战教程
- React使用动画组件 – ReactJS实战教程
- React使用CSS样式化组件的4种方式 – ReactJS实战教程
- React路由router作用和用法 – ReactJS实战教程
- React使用Fragment – ReactJS实战教程
- React Refs的作用和用法详解 – ReactJS实战教程