本文旨在让您了解高阶组件的工作原理以及使用它们的时间和原因。我们会保持它对初学者友好，以帮助您更好地理解这个概念及其存在的原因。一般来说，高阶组件是一种函数式编程方法。但是，本文不需要任何函数式编程知识，但需要一些 React 基础知识。我们假设您已经熟悉 React、React 组件、React 道具、生命周期方法以及如何使用 React 构建基本应用程序。

我们将介绍一些函数式编程概念，这些概念将帮助您更好地理解 HOC。

让我们从正式的定义开始：

高阶组件是一个接受一个组件并返回一个新组件的函数。

HOC 不是 React 或任何其他编程语言中的功能，而是从 react 的组合（由组件组成）性质演变而来的模式。

函数式编程和高阶函数

高阶函数是接受另一个函数作为参数的函数。您可能已经使用过属于此类别的地图功能。

这是一个源自函数式编程世界的概念。但是为什么要在 React 中使用函数式编程概念呢？

此模式的目标是将逻辑分解为更简单、更小的可重用函数。经验法则是一个函数只完成一项任务并且做得很好。这也避免了副作用（更改不属于该函数的任何内容），并使调试和维护变得更加容易。

函数式编程的一个经典例子是乘法：

const multiply = (x) => (y) => x * y
multiply(5)(20)
1
2

类似地，HOC 将另一个组件作为参数。

让我们构建一个 HOC 并在我们进行的过程中了解更多信息。

React 中的高阶组件HOC

让我们直接看一些代码。

const rev